<html>
<head>
<meta charset="UTF-8">
<title>画布旋转</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
var oCanvas = document.getElementById("canvas");
var context = oCanvas.getContext("2d");
context.fillStyle = "#ededed";
context.fillRect(, , , );
//save
context.save();
//1.变更坐标原点
context.translate(,);
context.rotate(Math.PI);//旋转
context.beginPath();
context.fillStyle = "rgba(255,0,0,0.5)";//颜色
context.fillRect(,,,);
context.fillRect(,,,);
context.fillRect(,,,);
context.closePath();
//restore
context.restore();
</script>
</body>
</html>
以上就是HTML5之canvas 7画布旋转的详细内容，更多关于HTML5之canvas 7画布旋转的资料请关注九品源码其它相关文章！