HTML5 canvas基本绘图之绘制五角星

在HTML5的绚丽画布中，有一个特殊的标签引人注目：<canvas></canvas>。它不仅仅是一个普通的标签，更是一个绘制图形的神奇容器。如同其他HTML标签一样，它拥有诸如id、class、style等属性，但其独特之处在于能够获取一个CanvasRenderingContext2D对象，让我们能够通过JavaScript脚本巧妙控制绘图。

要在<canvas>>元素上进行绘图，其实只需三个简单的步骤：获取<canvas>元素对应的DOM对象，这是一个Canvas对象；接着，调用Canvas对象的getContext()方法，获取一个CanvasRenderingContext2D对象；利用这个对象进行绘图，尽情展现你的创意。

以绘制一个五角星为例，我们先确定各个顶点的坐标规律。这里要特别注意，在canvas中，Y轴的方向是向下的，这与我们常规的坐标系有所不同。

相应的代码示例如下：

```javascript

var canvas = document.getElementById("canvas");

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

context.beginPath();

//设置五个顶点的坐标，根据顶点制定路径

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

context.lineTo(Math.cos((18+i72)/180Math.PI)200+200,

-Math.sin((18+i72)/180Math.PI)200+200);

context.lineTo(Math.cos((54+i72)/180Math.PI)80+200,

-Math.sin((54+i72)/180Math.PI)80+200);

}

context.closePath();

//设置边框样式以及填充颜色

context.lineWidth="3";

context.fillStyle = "F6F152";

context.strokeStyle = "F5270B";

context.fill();

context.stroke();

```

通过这段代码，一个充满艺术感的五角星便跃然纸上。最后的效果，请大家自行想象，相信定能为大家的学习带来启发。也希望大家能够支持我们的狼蚁SEO。

在canvas的世界里，你可以创造出无限可能。无论是动画、游戏还是图形应用，canvas都能为你提供强大的支持。希望大家能够深入canvas的奥秘，发掘更多的创意和灵感。的内容就到这里结束了，希望对大家有所帮助。