<!DOCTYPE HTML>
<html>
<head>
<title>旋转</title>
</head>
<body>
<canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)">
您的浏览器不支持 canvas 标签
</canvas>
<br />
<button type="button" onclick="drawIt();">不断地点我看 Demo</button>
<button type="button" onclick="clearIt();">清除画布</button>
<script type="text/javascript">
var ctx = document.getElementById('canvas').getContext('2d');
var canvasRadian = 0;
var stepRadian = 15 * Math.PI / 180;
function drawIt() {
if (canvasRadian == 0)
ctx.strokeRect(360, 0, 20, 60);
canvasRadian = stepRadian;
/*
* context.rotate(radian) - 将当前的用户坐标系旋转指定的弧度,顺时针为正值,逆时针为负值
* radian - 弧度值
*/
ctx.strokeStyle = "blue";
ctx.rotate(stepRadian);
ctx.strokeRect(360, 0, 20, 60);
}
function clearIt() {
ctx.rotate(-canvasRadian);
canvasRadian = 0;
ctx.strokeStyle = "black";
ctx.clearRect(0, 0, 400, 400);
}
</script>
</body>
</html>
Html5画布操作-旋转 | rotate()
最新推荐文章于 2021-06-24 07:28:27 发布