使用html5 canvas实现的简单的动画

其实,我们知道,就算没有html5,我们也能在网页中实现动画, 主要就是通过js来控制图片的移动,等等,但是html5中提供了canvas这个接口,我们就可以通过动态的在html5中绘制我们想要的图形, 下面我们简单的介绍一下动画的实现。

输入代码:

———————————————————————————————-

<!DOCTYPE HTML>
<html>
<head>
<title>使用html5实现动画</title>
<meta charset=”UTF-8″>
<script type=”text/javascript”>
var context;
var width,height;
var i;
function draw(){
var canvas=$(“canvas”);
if(canvas==null){
return false;
}
context=canvas.getContext(“2d”);
width=canvas.width;
height=canvas.height;
i=0;
setInterval(rotate,100);
}

function rotate(){ //这个是动画的实现
context.clearRect(0,0,width,height);
context.fillStyle=”red”;
context.fillRect(i,0,20,20);
i=+20;
};

function $(id){
return document.getElementById(id);
}
</script>
</head>

<body onload=”draw();”>
<center>
<canvas id=”canvas” width=”500″ height=”200″>您的浏览器不支持</canvas>
<center>
</body>
</html>

——————————————————————————————————————–

效果截图:

演示地址:http://www.cangzhang.com/wp-content/uploads/2012/08/donghua.htm

共有 0 条评论

Top