您的位置：首页 > Web前端 > HTML5

HTML5 Canvas 旋转

2014-10-14 10:24 295 查看

旋转

与移动一样，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>

<!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>

效果如图：

补充：

缩放

Context对象可以调用scale()方法来控制Canvas在x轴和y轴方向上的缩放比例。scale()方法的原型如下：

void scale(x, y);

其中x、y分别表示在x轴和y轴上的缩放比例，必须是正数。同translate()与rotate()一样，scale也是对整个Canvas对象的改变，但是不会影响已经绘制的图形

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 旋转

相关文章推荐

新的分享

章节导航