};
</script>
</body>
</html>
运行结果：
因此，在使用图形变换的时候，要记得结合使用状态保存。
旋转变换rotate()
同画圆弧一样，这里的rotate(deg)传入的参数是弧度，不是角度。同时需要注意的是，这个的旋转是以坐标系的原点（0，0）为圆心进行的顺时针旋转。所以，在使用rotate()之前，通常需要配合使用translate()平移坐标系，确定旋转的圆心。即，旋转变换通常搭配平移变换使用的。
最后一点需要注意的是，Canvas是基于状态的绘制，所以每次旋转都是接着上次旋转的基础上继续旋转，所以在使用图形变换的时候必须搭配save()与restore()方法，一方面重置旋转角度，另一方面重置坐标系原点。
- <!DOCTYPE html>
<html lang="zh">
- <head>
<meta charset="UTF-8">
- <title>旋转变换</title>
<style>
- body { background: url("./images/bg3.jpg") repeat; }
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
- </style>
</head>
- <body>
<div id="canvas-warp">
- <canvas id="canvas">
你的浏览器居然不支持Canvas？！赶快换一个吧！！
- </canvas>
</div>
-
<script>
- window.onload = function(){
var canvas = document.getElementById("canvas");
- canvas.width = 800;
canvas.height = 600;
- var context = canvas.getContext("2d");
context.fillStyle = "#FFF";
