5.4.1_利用剪辑区域来处理动画背景
来源:互联网 发布:南京行知实验中学分校 编辑:程序博客网 时间:2024/06/16 11:05
5.4.1_利用剪辑区域来处理动画背景
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>利用剪辑区域来处理动画背景</title> <style> body{ background: #ddd; } #canvas{ background: #fff; cursor: pointer; margin-left: 10px; margin-top: 10px; -webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.5); -moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.5); box-shadow: 3px 3px 6px rgba(0,0,0,0.5); } #controls{ margin-top: 10px; margin-left: 15px; } </style> </head> <body> <div id="controls"> <input id="animateButton" type="button" value="Animate" /> </div> <canvas id="canvas" width="750" height="500"></canvas> </body> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var paused = true; var discs = [ //三个圆的各种属性 { x:150, y:250, lastX:150, lastY:250, velocityX:-3.2, velocityY:3.5, radius:25, innerColor:'rgba(255,255,0,1)', middleColor:'rgba(100,145,230,0.7)', outerColor:'rgba(100,145,230,0.5)', strokeStyle:'gray' }, { x:50, y:150, lastX:50, lastY:150, velocityX:2.2, velocityY:2.5, radius:25, innerColor:'rgba(100,145,230,1)', middleColor:'rgba(100,145,230,0.7)', outerColor:'rgba(100,145,230,0.5)', strokeStyle:'blue' }, { x:150, y:75, lastX:150, lastY:75, velocityX:1.2, velocityY:1.5, radius:25, innerColor:'rgba(255,0,0,1)', middleColor:'rgba(255,0,0,0.7)', outerColor:'rgba(255,0,0,0.5)', strokeStyle:'orange' }, ]; var numDiscs = discs.length; var animateButton = document.getElementById('animateButton'); //初始化 context.font = '48px Helvetica'; drawBackground(); //事件控制 animateButton.onclick = function(){ paused = paused? false:true; if(paused){ //如果停止动画 animateButton.value = 'Animate'; }else{ //播放动画 window.requestAnimationFrame(animate); animateButton.value = 'Pause'; } } //执行每次动画效果 function animate(time){ if(!paused){ update(); //更新此帧的三个圆的各种新属性 drawCircles();//开始绘制更新后的圆 //执行下一次animate window.requestAnimationFrame(animate); } } //更新 function update(){ var disc; for(var i=0;i<numDiscs;i++){ disc = discs[i]; if(disc.x+disc.radius+disc.velocityX>context.canvas.width || disc.x-disc.radius+disc.velocityX<0){ disc.velocityX = -disc.velocityX; } if(disc.y+disc.radius+disc.velocityY>context.canvas.height || disc.y-disc.radius+disc.velocityY<0){ disc.velocityY = -disc.velocityY; } disc.lastX = disc.x; disc.lastY = disc.y; disc.x += disc.velocityX; disc.y += disc.velocityY; } } //绘制更新后的圆 function drawCircles(){ var disc; var gradient; for(var i=0;i<numDiscs;i++){ drawDiscBackground(discs[i]); } for(var i=0;i<numDiscs;i++){ disc = discs[i]; gradient = context.createRadialGradient(disc.x,disc.y,0,disc.x,disc.y,disc.radius); gradient.addColorStop(0.3,disc.innerColor); gradient.addColorStop(0.5,disc.middleColor); gradient.addColorStop(1.0,disc.outerColor); context.save(); context.beginPath(); context.arc(disc.x,disc.y,disc.radius,0,Math.PI*2,false); context.fillStyle = gradient; context.strokeStyle = disc.strokeStyle; context.fill(); context.stroke(); context.restore(); } } //绘制上次背景 function drawDiscBackground(disc){ context.save(); context.beginPath(); context.arc(disc.lastX,disc.lastY,disc.radius+2,0,Math.PI*2,false); context.clip(); eraseBackground(); drawBackground(); context.restore(); } //擦除背景 function eraseBackground(){ context.clearRect(0,0,canvas.width,canvas.height); } //绘制横隔背景 function drawBackground(){ context.save(); context.shadowColor = undefined; context.shadowOffsetX = 0; context.shadowOffsetY = 0; context.shadowBlur = 0; var step_y = 12; var left_margin = step_y*4; var top_margin = step_y*3; var i = canvas.height; context.strokeStyle = 'lightblue'; context.lineWidth = 1; //这里设置成0.5是会有问题 while(i>top_margin){ context.beginPath(); context.moveTo(0,i); context.lineTo(canvas.width,i); context.stroke(); i-=step_y; } context.restore(); } </script></html>
阅读全文
0 0
- 5.4.1_利用剪辑区域来处理动画背景
- 2.15.2_利用剪辑区域来制作伸缩式动画
- 5.4.2_利用图块复制技术来处理动画背景
- 2.15.1_通过剪辑区域来擦除图像
- 4.6_结合剪辑区域绘制墨镜滤镜效果
- 动画翻页功能剪辑
- Animation Clips(动画剪辑)
- Unity之动画剪辑
- 创建动画剪辑
- Android-利用动画实现背景逐渐变暗
- 利用Java处理图片,更换背景
- 利用双缓冲技术来显示动画
- 利用CSS Transition来实现动画效果
- 利用CImage类来生成精灵动画
- 利用layer-list来制作阴影效果背景
- 利用反射,flash动态调用影片剪辑。
- 自定义PopupWindow,带显示隐藏动画、全屏背景以及触摸屏幕空白区域消失的功能
- 4.5.1_利用getImageData()与putImageData()方法来实现橡皮筋式选取框_改良版
- KAFKA
- No module named cv2 和 import caffe失败问题的解决方法
- Three Oxford scientists elected to Academy of Medical Sciences
- SoapUI启动报错:The JVM could not be started. The maximum heap size (-Xmx) might be too large
- 测试男女标准体重
- 5.4.1_利用剪辑区域来处理动画背景
- XmlResourceParser出错解决
- 安卓学习笔记---Android-PickerView实现 3D滚轮效果(时间选择器、省市区三级联动,单项选择效果)
- 类何时加载和初始化
- oracle配置监听
- centos 7.2 安装Nginx 及配置php-fpm识别php文件
- 鼠标操作贝塞尔曲线
- bzoj 4579 [Usaco2016 Open]Closing the Farm
- navicat连接mysql出现1862的错误