HTML5实例教程:Canvas标签坐标变换与路径结合

2012-02-19 15:32:30  来源:网页教学网 

钱柜娱乐Webjx文章简介:HTML5每日一练之Canvas标签的应用-坐标变换与路径结合使用.

 到目前为止,我们已经学会了很多Canvas的绘制方法,如果我们要绘制图形怎么办呢?

我们需要对矩形变形,使用坐标变换就足够了。但是对使用路径绘制出来的图形进行变幻的时候,那么要考虑的事情就 多了。因为使用坐标变换之后,已经创建好的路径就不可用了。必须要重新创建路径,重新创建路径后,坐标变换方法又失效了。

解决思路
1、必须先另外绘制一个创建路径的函数。
2、在坐标变幻的同时调用该函数。

代码案例

  • <!DOCTYPE HTML>
  • <html>
  • <head>
  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  • <title>HTML5每日一练之Canvas标签的应用-坐标变换与路径结合使用</title>
  • <script type="text/javascript">
  • window.onload = function()
  • {
  • createPic();
  • }

  • //创建图形
  • function createPic()
  • {
  • var canvas = document.getElementById("W3Cfuns_canvas");
  • var context = canvas.getContext("2d");
  • context.fillStyle = "#d4d4d4";
  • context.fillRect(0, 0, 400, 300);
  • //绘制图形
  • context.translate(200, 50);
  • for(var i = 0; i < 50; i++)
  • {
  • context.translate(25, 25);
  • context.scale(0.95, 0.95);
  • context.rotate(Math.PI / 8);
  • createStar(context);//此方法专门绘制五角星
  • context.fill();
  • }
  • }

  • //创建五角星的方法
  • function createStar(c)
  • {
  • var n = 0;
  • var dx = 100;
  • var dy = 0;
  • var s = 50;
  • var x = Math.sin(0);
  • var y = Math.cos(0);
  • var dig = Math.PI / 5 * 4;
  • //创建路径
  • c.beginPath();
  • c.fillStyle = toRGB(parseInt(Math.random()*(255 - 0 + 1) + 0),parseInt(Math.random()*(255 - 0 + 1) + 0),parseInt(Math.random()*(255 - 0 + 1) + 0));
  • for(var i = 0; i < 5; i++)
  • {
  • x = Math.sin(i * dig);
  • y = Math.cos(i * dig);
  • c.lineTo(dx + x * s, dy + y * s);
  • }
  • c.closePath();
  • }

  • //小于10补零
  • function addZero(string){return string.length == 2 ? string : '0' + string;}

  • //随即颜色
  • function toRGB(redValue, greenValue, blueValue)
  • {
  • var
  • rgbR = addZero(redValue.toString(16), 2),
  • rgbG = addZero(greenValue.toString(16), 2),
  • rgbB = addZero(blueValue.toString(16), 2);
  • var rgb = "#" + rgbR + rgbG + rgbB;
  • return rgb;
  • }
  • </script>
  • </head>

  • <body>
  • <canvas id="W3Cfuns_canvas" width="400" height="300"></canvas>
  • </body>
  • </html>
更多