Html5旋转绘画大法

来源：互联网发布：linux查看ssh连接数编辑：程序博客网时间：2024/05/18 00:19

首先先说明一下问题：

例如：要画这样一个矩形ctx.fillRect(50,50,100,200); ，要实现的目的是让这个矩形旋转一个角度。现在就有问题了，旋转操作的原心是（0，0），也就是画布的坐标原点，而这个矩形的左上顶点是（50，50），直接旋转是出不来我们想要的结果的，这里就需要一个平移操作了，代码如下：

<!DOCTYPE html><html><head>    <title>Rectangle</title>    <script type="text/javascript">    var ctx;    function init(){        ctx = document.getElementById('canvas').getContext('2d');        ctx.fillStyle = "rgb(250,0,0)";        ctx.save(); //保存当前画布属性        ctx.translate(50,50);   //画布平移        ctx.rotate(-Math.PI/6); //画布旋转        ctx.translate(-50,-50); //画布平移回去        ctx.fillRect(50,50,100,200);    //绘制矩形        ctx.restore();  //回复之前保存的画布属性        ctx.fillStyle = "rgb(0,0,250)";        ctx.fillRect(50,50,5,5);    }    </script></head><body onload="init();"><canvas id="canvas" width="400" height="300"></canvas></body></html>

这个平移旋转操作貌似以后可以用到，mark一下。

0 0