Html5旋转绘画大法

首先先说明一下问题:

例如:要画这样一个矩形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一下。

你可能感兴趣的:(html5)