标签：
坐标变换
案例1：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function draw(){
var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");
cxt.translate(200,50);
cxt.fillStyle=‘rgba(255,0,0,0.25)‘;
for(var i=0;i<40;i++)
{
cxt.translate(25,25);
cxt.scale(0.9,0.9);
cxt.rotate(Math.PI/10);
cxt.fillRect(0,0,100,50);
}
}
</script>
</head>
<body onload="draw()">
<canvas id="myCanvas" width="450" height="350" style="border: 1px solid #dddddd">您的浏览器不支持</canvas>
</body>
</html>
效果图：
注释：
（1）平移
cxt.translate( x , y );
translate方法使用两个参数，x表示将坐标轴原点向左移动多少个单位，默认情况下为像素，y表示将坐标轴原点向下移动多少个单位。
（2）扩大
cxt.scale( x , y );
scale方法使用两个参数，x是水平方向的放大倍数，y是垂直方向的放大倍数；将图形缩小的时候，将这两个参数设为0到1之间的小数就可以了，譬如0.5是指将图形缩小一半。
（3）旋转
cxt.rotate(angle);
rotate方法接受一个参数angle，angle是指旋转的角度，旋转的中心点是坐标轴的原点。旋转是以顺时针方向进行的，要想逆时针旋转时，将angle设定为负数就可以了。
案例2
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function draw(){
var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");
cxt.fillStyle="#eeeeff";
cxt.fillRect(0,0,400,320);
cxt.translate(60,60);
for( var i=0;i<6;i++)
{
cxt.translate(50,50);
cxt.scale(0.8,0.8);
cxt.rotate(Math.PI/10);
createStar(cxt);
cxt.fill();
}
function createStar(cxt){
var n=0;
var dx=0;
var dy=0;
var s=50;
cxt.beginPath();
cxt.fillStyle=‘rgba(255,0,0,0.5)‘;
var x=Math.sin(0);
var y=Math.cos(0);
var dig=Math.PI/5*4;
for(var i=0;i<5;i++)
{
var x=Math.sin(i*dig);
var y=Math.cos(i*dig);
cxt.lineTo(dx+x*s,dy+y*s);
}
cxt.closePath();
}
}
</script>
</head>
<body onload="draw()">
<canvas id="myCanvas" width="450" height="350" style="border: 1px solid #dddddd">您的浏览器不支持
</canvas>
</body>
</html>
效果图：
注释：
（1）如果要对矩形进行变形，使用坐标变换就足够了。
（2）createStar函数中，只创建了一个五角星，因坐标轴变换，在Canvas画布中，此五角星会一边缩小一边旋转，之后产生一个新的五角星，新的五角星又采用同样的方法进行绘制，最终绘制出一串变形效果的五角星。
标签：
原文地址：http://www.cnblogs.com/bingling2015/p/4415410.html
