读HTML5应用开发与实践【五】【画布绘制动画】

sa酱

于 2015-04-29 21:57:05 发布

阅读量338

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lx583274568/article/details/45372397

本文介绍了一种利用HTML5的Canvas元素实现简单动画的方法。通过JavaScript编程，我们创建了一个蓝色方块，并使其在画布上沿水平方向移动。文章详细展示了如何设置Canvas的基本属性、获取绘图上下文及使用clearRect和fillRect方法更新帧。

<!Doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html";charset="utf-8">
        <title>canvas</title>
        <script language=javascript>
		var i;
                var height;
		var width;
		var context;
            function draw()
            {
		
		var canvas=document.getElementById('1');
		if(canvas==null)
		{
			return false;
		}
		context=canvas.getContext('2d');
		//艹这里写成getContent检查了好久
		width=canvas.width;
		height=canvas.height;
		i=0;
		//rotate();
		setInterval("rotate()",80);
            }
		function rotate()
		{
			
			context.clearRect(0,0,width,height);
			context.fillStyle="blue";
			context.fillRect(i,0,20,20);
			i+=20;
		}
        </script>
    </head>
    <body>
        <canvas id="1" style="border: 1px solid skyblue" width="800" height="600">恩？
            <script>
                draw();
            </script>
        </canvas>
    </body>
</html>