Html5画布操作-旋转 | rotate()

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();">不断地点我看 Demobutton>
<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)