[Canvas学习]动画

Posted 2020-08-21 小碎石

学习目的：通过javascript操控<canvas>对象，实现交互动画。

动画的基本步骤

1. 清空canvas，使用clearRect方法

2. 保存canvas状态

3. 绘制动画图形

4. 恢复canvas状态

操控动画Controlling an animation

 setInterval(function, delay)

 setTimeout(function, delay)

 requestAnimationFrame(callback)

 

太阳系运动的小例子

<canvas id="canvas" width="300" height="300"></canvas>
<script type="text/javascript">
　　var sun = new Image();
　　var moon = new Image();
　　var earth = new Image();
　　var cvs = document.getElementById("canvas");
　　/**
　　* 创建三张图片并完成动画
　　* @return {[type]} [description]
　　*/
　　function init(){
　　　　sun.src = "image/Canvas_sun.png";
　　　　earth.src = "image/Canvas_earth.png";
　　　　moon.src = "image/Canvas_moon.png";
　　　　requestAnimationFrame(draw);
　　}
　　/**
　　* 分别通过平移旋转来设置不同的canvas状态完成三张图片的绘制
　　* @return {[type]} [description]
　　*/
　　function draw(){
　　　　if(cvs.getContext){
　　　　　　var ctx = cvs.getContext("2d");
　　　　　　ctx.globalCompositeOperation = "destination-over";
　　　　　　//1. 清空clearRect
　　　　　　ctx.clearRect(0,0,300,300);
　　　　　　//2. 保存canvas状态
　　　　　　ctx.fillStyle = "rgba(0,0,0,0,4)";
　　　　　　ctx.strokeStyle = "rgba(0,153,255,0.4)";
　　　　　　ctx.save();
　　　　　　ctx.translate(150,150);//sun图片大小为300*300
　　　　　　//3. 绘制图片
　　　　　　var time = new Date();
　　　　　　//绘制地球
　　　　　　ctx.rotate((2*Math.PI/60)*time.getSeconds()+(2*Math.PI/60000)*time.getMilliseconds());//1分钟=60秒,设置地球围绕太阳的旋转周期为1min
　　　　　　ctx.translate(105, 0);//地球运行轨迹半径为105
　　　　　　ctx.fillRect(0,-12,50,24);//地球阴影
　　　　　　ctx.drawImage(earth, -12, -12);//地球图片大小为24*24
　　　　　　ctx.beginPath();
　　　　　　ctx.arc(0,0,28.5,0,Math.PI*2,false);
　　　　　　ctx.closePath();
　　　　　　ctx.stroke();

　　　　　　ctx.save();
　　　　　　//绘制月球//此时canvas状态为默认状态
　　　　　　ctx.rotate((2*Math.PI/60)*time.getSeconds()+(2*Math.PI/60000)*time.getMilliseconds());
　　　　　　ctx.translate(0,28.5);//月球的运行轨迹半径为28.5
　　　　　　ctx.drawImage(moon, -3.5, -3.5);//月球图片大小为7*7

　　　　　　ctx.restore();
　　　　　　ctx.restore();
　　　　　　//最初的canvas状态
　　　　　　ctx.beginPath();
　　　　　　ctx.arc(150,150,105,0,Math.PI*2,false);
　　　　　　ctx.closePath();
　　　　　　ctx.stroke();
　　　　　　ctx.drawImage(sun, 0, 0, 300, 300);

　　　　　　requestAnimationFrame(draw);
　　　　}
　　}
　　init();
</script>

 

canvas绘制动画时钟

绘制时钟的方法有很多，分别介绍下不同的思路：

1. 利用canvas来绘制动画时钟，通过平移旋转来实现线段和圆的绘制

2. 利用html+CSS3来绘制动画时钟，也是通过CSS3的变形属性来实现线段和圆的绘制

这两种实现方法都需要通过JavaScript来确定当前的时间点，从而确定各个指针的初始位置。

 

绘制小球

加入控制元素，如物理碰撞检测等