坐标变化的例子–旋转的矩形

在本例中主要是使用到3个方法:

1.平移

context.translate(x,y);向左和下分别平移x和y,这个最好的用法就是找到一个对称线,以便更好地绘制图形。

2.扩大

contex.scale(x,y);x是水平方向的放大倍数,y是垂直方向的放大倍数。缩小的时候,只需要将参数设置在0-1之间的小数就可以了!~

3.旋转

context.rotate(angle);

这个方法只有一个参数,那就是angle。这个是值旋转的角度

下面我们通过这三个方法绘制出变形图形:

输入代码:

—————————————————————————————————-

<!DOCTYPE HTML> <html> <head> <title>使用html5绘制比较复杂的图形!–逐渐增加的圆</title> <meta charset=”UTF-8″> <script> function draw(){ var canvas=document.getElementById(“my”); var context=canvas.getContext(“2d”); //这个填充canvas的整个背景色 context.fillStyle=”#ffeeff”; context.fillRect(0,0,400,300); //图像的绘制 context.translate(200,50);//这是将绘制的开始点移动到中部 //这是绘制内容的颜色 context.fillStyle=’rgba(255,0,0,0.25)’; for(var i=0;i<50;i++){ context.translate(25,25);//每次绘制之后在将图形移动 context.scale(0.95,0.95);//每次图形缩小0.95 context.rotate(Math.PI/10);//每次旋转的角度 context.fillRect(0,0,100,50);//上面的平移使得在绘图的时候是相对平移之后的点开始,这里的开始位置是就是0 0 } }

window.addEventListener(“load”,draw,true); </script> </head>

<body> <center> 使用html5绘制变形的图像!~<br/><br/> <h1><a href=”http://www.yugaga.com”><font color=”green”>记住我们娱嘎嘎</font></a><h1> <canvas id=”my” width=”400″ height=”300″ style=”border:solid 1px red;”>额,浏览器不支持,你挺落后的</canvas> <center> </body> </html>

———————————————————————————————————————————-

截图效果:

演示地址:http://gagahtml-wordpress.stor.sinaapp.com/uploads/2012/05/xuanzhuantuxing.html

共有 1 条评论

Top