定义和用法
rotate() 方法旋转画布的坐标系统。
语法
rotate(angle)
参数
| 参数 | 描述 |
|---|---|
| angle | 旋转的量，用弧度表示。正值表示顺时针方向旋转，负值表示逆时针方向旋转。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.translate(160,160);//平移
context.fillStyle='rgba(120,93,222,0.25)';//填充
for(var i=0;i<15;i++){
//context.translate(25,25);//平移
context.scale(0.98,0.98);//扩大
context.moveTo(0,0);
context.lineTo(30,30);
context.stroke();
context.rotate(Math.PI/10);//旋转
context.fillRect(50,50,100,50);//画矩形
}
});
</script>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #C9C9C9;" width="300" height="300">
</canvas>
</body>
</html>
运行效果参看下图，或者1.png
当把代码改成 context.fillRect(0,0,100,50);//画矩形时，运行效果图参看下图或2.png
总结：始终在原点执行图像和路径变换操作
如果对一个不再原点的图形进行旋转变换，那么rotate变换函数会将图形绕着原点旋转而不是在原地旋转。如果对一个在原点的图形进行旋转变换，那么图像围绕原地（原地既是原点）旋转。
与之类似，如果缩放操作时没有将图形放置到合适的坐标上，那么所有路径坐标都会被同时缩放。取决于缩放比例的大小，新的坐标可能会超出canvas。
引用：http://blog.163.com/weizi_mm/blog/static/3155442011112922822170/
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
