HTML5要用Canvas标签，就像个画板，随便乱涂乱画。Canvas不就是网页上的小零件么？但是有JavaScript可以帮忙控制，这让我们的想象力大大提高！别忘了，Canvas跟普通的id、class、style不同，还有两个重要的height和width属性，它们可是决定画布大小的关键~
画Canvas，好简单喔~就先找Canvas元素在网页上的那货（就是个Canvas），然后用innerHTML呀啥的操作给它拿过来，不过这次是用getContext()方法。这样就能拿到个CanvasRenderingContext2D对象哒，这样一来你就可以开始作画，是不是特别轻松？别着急，我还告诉你几个小妙招给你提前避坑！
绘制五角星的第一步：理解五角星的构造
要想画好五角星，了解构造很重要。每个尖儿都对应着各自的坐标图，有一套规矩在。不过得注意下，Canvas里面的Y轴可是向下的，和我们平时学到的有些不一样哟。所以画的时候千万别忘了这个小细节，别让五角星一不小心倒下去！
说白了，算五角星每个顶点在哪儿得套点数学公式。有点麻烦？不怕，只要找到规律就简单了。先在纸上标出五角星所有顶点，再按着这些点的顺序找Canvas上对应的坐标就行了。搞定后咱们就可以开始画画！
实战演练：用代码绘制五角星
哥们儿，既然咱都说了这么多了，那就咋样，咱俩开始动手做点啥！首先，咱们得找到个Canvas元素，然后使用JS把它抓过来，再通过getContext(‘2d’)搞出来一个叫画布上下文的东西。接下来，就是用这个神奇的家伙来画出五角星。
想要画出五角星?好办!只需要确定五个点的位置，然后用线连接起来。这时CanvasRenderingContext2D里的两个实用方法可以帮忙：首先是moveTo(),它能让你的笔定位在起始点;接着是lineTo(),这个强大功能能帮助我们顺利地画直线抵达下一个点。只需用小循环依次连接五个点，最后封闭路径，轻松完成五角星绘制任务！
绘制五角星的注意事项：细节决定成败
画五角星时主要看几点！线条粗细、用啥颜色以及五角星里的填充颜色都会影响美感的！还要留意画图时的坐标，不然五角星可能会变形！
要画五角星别忘擦掉Canvas上的旧图形这样就能随时开始画了。想让五角星更炫酷？加个阴影，或者换个颜色试试看，画面肯定会大变样！
优化与进阶：让五角星更炫酷
搞定了五角星之后，开心到爆？想不让它更炫，那可不行！试试加点小动作，比如让五角星绕着画布转啊转或者闪闪发光。操作其实超简单，用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+i*72)/180*Math.PI)*200+200,
-Math.sin((18+i*72)/180*Math.PI)*200+200);
context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,
-Math.sin((54+i*72)/180*Math.PI)*80+200);
}
context.closePath();
//设置边框样式以及填充颜色
context.lineWidth="3";
context.fillStyle = "#F6F152";
context.strokeStyle = "#F5270B";
context.fill();
context.stroke();
案例分享：看看别人是怎么画的
你学会了么？是不是跃跃欲试想要动手试试？别急，先看看其他人的作品也挺不错！网络上有好多用Canvas画图的实例，尤其是那些大神级别的分享，他们的技法一流，理念创新独特，看得人心花怒放。
看了好多实例，我学会了canvas怎么玩转各种形状，还学到css和javascript怎么搭档，做出超级拉风的效果。这种做法不仅能提高我们的技能，还给我们带来了无尽的创新灵感。
总结与展望：Canvas绘图的未来
恭喜看完这篇，现在大概知道怎么用HTML5画出五角星了？基础知识、实操以及实战技巧，所有的我们都讲过了，期待帮你提升~
最后问你个问题哈：你想用Canvas画点什么？难点儿还是简单点儿的？赶紧到评论区跟我们说说！别忘了给这篇文章点个赞，分享出去让更多人一起来学Canvas~
评论0