都说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();
}