canvas 擦除动画_HTML5 Canvas动画详解

示例代码如代码如下所示：

var mycanvas = document.getElementById("mycanvas");

var ctx = mycanvas.getContext('2d');

ctx.fillStyle="red";

var i=0; //在定时器外部初始化一个i变量

setInterval( //定时器开始

function(){

i++; //x轴的坐标数自加

ctx.clearRect(0,0,500,500);//擦除整个画布的内容

ctx.fillRect(i,0,100,100); //在(i,0)起始位置填充一个100*100的矩形

},10); //每10毫秒刷新一次

执行效果图：

上下运动动画

上下运动动画的实质就是：一个对象的坐标(x,y)中的y 轴数值发生变化，而x 轴不发生变化。

示例代码如代码如下所示：

var mycanvas = document.getElementById("mycanvas");

var ctx = mycanvas.getContext('2d');

ctx.fillStyle="red";

var i=0; //在定时器外部初始化一个i变量

setInterval( //定时器开始

function(){

i++; //y轴的坐标数自加

ctx.clearRect(0,0,500,500); //擦除整个画布的内容

ctx.fillRect(0,i,100,100); //在(0,i)起始位置填充一个100*100的矩形

}

,10); //每10毫秒刷新一次

执行效果图：

圆心旋转运动动画

圆心旋转动画的实质就是：以画布的平面起始坐标为圆心位置旋转。

示例代码如代码如下所示：

var mycanvas = document.getElementById("mycanvas");

var ctx = mycanvas.getContext('2d');

var i =0;

var rectWidth = 150;

var rectHeight = 75;

setInterval(function(){

i++;

ctx.clearRect(0,0,500,500);

ctx.save();

ctx.translate(mycanvas.width/2, mycanvas.height/2); //将坐标移动到中心

ctx.rotate(Math.PI*(i/100)); //累进旋转

ctx.fillStyle = "green";

ctx.fillRect(-rectWidth/2, -rectHeight/2, rectWidth, rectHeight);//填充矩形

ctx.restore();

}, 10); //设置绘图周期为10毫秒

执行效果图：

抛物线运动动画

抛物线运动动画是游戏开发中常见的一种运动形式(例如，愤怒的小鸟游戏就是一个抛物线运动游戏)，其坐标的最基本的公式是x=y2，本例给出的代码已包括物理运动的基本要素(速度、时间、重力等)，供大家参考。

示例代码如下所示：

var mycanvas = document.getElementById("mycanvas");

var ctx = mycanvas.getContext('2d');

var v = 2, t = 5, g = 0.098; //初始化速度、时间、重力三要素

var x, y;

var xxx = setInterval(function(){

t++

x = (v) * t; //x轴开始有初速度(值为2)

y = (x * g * t * t / 2); //公式请读者自查

ctx.fillStyle = "#F00";

ctx.fillRect(y, x, 5, 5);

ctx.fill()

console.log(x, y)

if(x >= 1000 || y >= 400){

clearInterval(xxx); //消除运动

}

}, 100);

执行效果见下图：

渐变运动动画

渐变运动主要是指目标元素的颜色动态渐变。

示例代码如下：

var mycanvas = document.getElementById("mycanvas");

var ctx = mycanvas.getContext('2d');

var i =0;

setInterval(function(){

gradient = ctx.createRadialGradient(250,250,0,250,250,250);

gradient.addColorStop(i*0,"magenta"); //设定颜色点

gradient.addColorStop(i*(1/5),"blue"); //设定颜色点

gradient.addColorStop(i*(1/2),"green"); //设定颜色点

gradient.addColorStop(i*(3/4),"yellow");//设定颜色点

gradient.addColorStop(i*1,"red"); //设定颜色点

ctx.fillStyle = gradient;

i=i+0.1;

if(i>=1){ //超过颜色点值后，自动归0

i=0;

}

ctx.fillRect(0,0,500,500);

}, 50); //设置绘图周期为50毫秒

执行效果见下图：