画布旋转——HTML5之特效

最新推荐文章于 2021-11-11 23:34:56 发布

cangkukuaimanle

最新推荐文章于 2021-11-11 23:34:56 发布

阅读量2.4k

点赞数 2

分类专栏： html/css/javascript HTML5

本文链接：https://blog.csdn.net/cangkukuaimanle/article/details/8109599

版权

html/css/javascript 同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

HTML5

3 篇文章 0 订阅

订阅专栏

translate.html内容如下：

<!DOCTYPE HTML> 
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="translate.js"></script>
<script type="text/javascript">
$(document).ready(function(){

});
</script>
</head>
<body>
<canvas id="simple"></canvas>
</body>
</html>

translate.js代码如下：

(function(){
	var canvas=null,
	context=null,
	angle=0;
	function resetCanvas(){
		canvas=document.getElementById("simple");
		canvas.width=window.innerWidth;
		canvas.height=window.innerHeight;
		context=canvas.getContext("2d");
	}
	function animate(){
		context.save();
		try{
			//清除画布
			context.clearRect(0, 0, canvas.width, canvas.height);
			//设置原点
			context.translate(canvas.width * 0.5, canvas.height * 0.5);
			//旋转角度
			context.rotate(angle);
			//设置填充颜色
			context.fillStyle = "#FF0000";
			//绘制矩形
			context.fillRect(-30, -30, 60, 60);
			angle += 0.05 * Math.PI;
		}
		finally{
			context.restore();
		}
	}
	$(window).bind("resize",resetCanvas).bind("reorient",resetCanvas);
	$(document).ready(function(){
		window.scrollTo(0,1);
		resetCanvas();
		setInterval(animate,40);
	});
})();

用支持HMTL5的浏览器打开translate.html就可以看到一个旋转的红色方块