到目前为止，我们已经学会了很多Canvas的绘制方法，如果我们要绘制如下图的图形怎么办呢？
我们需要对矩形变形，使用坐标变换就足够了。但是对使用路径绘制出来的图形进行变幻的时候，那么要考虑的事情就 多了。因为使用坐标变换之后，已经创建好的路径就不可用了。必须要重新创建路径，重新创建路径后，坐标变换方法又失效了。
解决思路
1、必须先另外绘制一个创建路径的函数。
2、在坐标变幻的同时调用该函数。
代码案例
HTML5每日一练之Canvas标签的应用-坐标变换与路径结合使用 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; }
下载本文
