HTML5 Canvas 旋转
2011-12-14 13:12
337 查看
旋转
与移动一样,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>
效果如图:
![](http://hi.csdn.net/attachment/201112/14/0_132383970999gN.gif)
补充:
缩放
Context对象可以调用scale()方法来控制Canvas在x轴和y轴方向上的缩放比例。scale()方法的原型如下:void scale(x, y);
其中x、y分别表示在x轴和y轴上的缩放比例,必须是正数。同translate()与rotate()一样,scale也是对整个Canvas对象的改变,但是不会影响已经绘制的图形
由于缩放非常简单,就不单独做demo了。
相关文章推荐
- 详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
- HTML5 Canvas 旋转的“金字塔”
- HTML5应用-----canvas 实例,图片旋转 IE+ FF OP CH 兼容
- HTML5 Canvas平移,放缩,旋转演示
- 实例讲解利用HTML5 Canvas API操作图形旋转的方法
- HTML5之7 __Canvas: 缩放、旋转、创建阴影
- html5 canvas防微博旋转
- 基于HTML5 Canvas 实现矢量工控风机叶轮旋转
- HTML5 Canvas平移,放缩,旋转演示
- html5原生canvas内image旋转
- html5 canvas实现小球绕圆旋转
- html5 canvas旋转
- 基于HTML5 Canvas实现工控2D叶轮旋转
- html5的canvas旋转动画
- html5 canvas 实现小球绕椭圆旋转
- 基于HTML5 Canvas 实现矢量工控风机叶轮旋转
- html5的画布canvas――画出弧线、旋转的图形实例代码+效果图
- html5 canvas围绕中心点旋转
- HTML5 Canvas进阶(一):渐变,透明,移动,旋转,缩放
- HTML5 Canvas 旋转的“金字塔”