HTML5 Canvas 旋转

最新推荐文章于 2024-04-16 16:33:00 发布

coding_or_coded

最新推荐文章于 2024-04-16 16:33:00 发布

阅读量6.2k

点赞数 1

分类专栏： HTML5 文章标签： html5 图形 function image html

本文链接：https://blog.csdn.net/coding_or_coded/article/details/7070041

版权

HTML5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

旋转

与移动一样，Context对象能够调用rotate()方法来按一定的夹角转动Canvas画布。rotate()方法的原型如下：

void rotate(radian);

用于将Canvas画布顺时针转动到与原x轴（横轴）方向成radian角的位置，radian按弧度制，转动后x轴方向同时发生改变。同样，旋转将不会影响到已经绘制的图形但是会影响其它由该Canvas生成的Context对象。

下面的旋转的示例：

<!DOCTYPE HTML>
<html>
<body>
<canvas id="canvas" width="600"height="400">    
         <p>Your browserdoes not support the canvas element!</p>    
</canvas>    
     
<script type="text/javascript">    
	var canvas =document.getElementById("canvas");    
	var context2D =canvas.getContext("2d"); 
	var pic = new Image(); 
	pic.src ="milaoshu.jpg";  //注意目录结构，这里是把图片和html放在一个目录的
	
	//注意下面方法中画笔状态的保护，这在很多情况下都会使用到
	function draw(){
		context2D.clearRect(0,0,600,400);
		context2D.save();//保存画笔状态
		context2D.rotate(Math.PI/10*Math.random());//开始旋转
		context2D.drawImage(pic,100, 100);
		context2D.restore();//绘制结束以后，恢复画笔状态
	}		 
     
	setInterval(draw, 1000);
	 
</script>    
</body>
</html>

效果如图：