html5 canvas 复杂图形,canvas绘制复杂图形

都说html5的功能很强大，今天来发一个用标签做的小例子。看到下面的图你会有什么感受？如果学过flash

as的朋友应该对这个图形的制作方法不会陌生。在flash中，我们用到会2个属性，一个是moveTo，另一个是lineTo。

moveTo(x,y)里面有了个参数，分别对应的是坐标轴上的x点与y点，绘制直线的时候以这个坐标点为起点。

lineTo(x,y)指终点的坐标点位置，指定的直线起点与指定的直线终点之间绘制一条直线。然后我们通过旋转角度来实现各种复杂的图案。

在html5中也用到这2个属性，配合canvas标签实现此复杂图案。由于各浏览器的内核不同，建议使用chrome浏览器执行代码。

(附源码)

function draw(id) {

var canvas = document.getElementByIdx_x_x_x(id);

if (canvas == null) return false;

var context = canvas.getContext('2d');

context.fillStyle = "#EEEEFF";

context.fillRect(0, 0, 400, 300);

var n = 0;

var dx = 170;

var dy = 150;

var s = 140;

context.beginPath();

context.fillStyle = '#1ca40e';

context.strokeStyle = '#5ae84c';

var x = Math.sin(0);

var y = Math.cos(0);

var dig = Math.PI / 15 * 11;

for (var i = 0; i < 30; i++) {

var x = Math.sin(i * dig);

var y = Math.cos(i * dig);

context.lineTo(dx + x * s, dy + y * s);

}

context.closePath();

context.fill();

context.stroke();

}