其中， (a,b) 是圆心坐标， r 是半径大小， θ 是弧度大小，在六角星中，弧度间隔都是 1/6 弧度，因此，6个坐标点分别是：

var arrPos = [ [a + r * Math.cos(0), b + r * Math.sin(0)], [a + r * Math.cos(Math.PI * 2 / 3), b + r * Math.sin(Math.PI * 2 / 3)], [a + r * Math.cos(Math.PI * 2 / -3), b + r * Math.sin(Math.PI * 2 / -3)], [a + r * Math.cos(Math.PI / 3), b + r * Math.sin(Math.PI / 3)], [a + r * Math.cos(Math.PI / -3), b + r * Math.sin(Math.PI / -3)], [a + r * Math.cos(Math.PI), b + r * Math.sin(Math.PI)] ]

然后，就可以类似下面3点连线填充绘制了：

context.beginPath(); context.moveTo(arrPos[0][0], arrPos[0][1]); context.lineTo(arrPos[1][0], arrPos[1][1]); context.lineTo(arrPos[2][0], arrPos[2][1]); context.closePath(); context.fillStyle = '#fff'; context.fill(); context.beginPath(); context.moveTo(arrPos[3][0], arrPos[3][1]); context.lineTo(arrPos[4][0], arrPos[4][1]); context.lineTo(arrPos[5][0], arrPos[5][1]); context.closePath(); context.fillStyle = '#fff'; context.fill();

然后，只要确定6个场景，星星的中心坐标位置，就能将所有的星座绘制起来了。

然后，有了这些基本功，配合本文介绍的 canvas 动效实现的常见套路，就能实现最终想要的效果。

五、接在结尾的结束语

去年关于canvas效果写了篇文章“ canvas图形绘制之星空、噪点与烟雾效果 ”，演示了一些基础的canvas效果的实现，都有未压缩的源代码，帮助学习理解。

好了，就这些，感谢阅读，欢迎交流！

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址： ?p=6017

（本篇完）

作者：张鑫旭-鑫空间-鑫生活

it's my whole life!

原文地址：canvas 2D炫酷动效的实现套路和需要的技术积累, 感谢原作者分享。

←【翻译】借助SVG实现背景透明JPG图片

发表评论