canvas制作流星飘雪散花等效果

最新推荐文章于 2024-06-12 10:25:35 发布

黑白猫妈

最新推荐文章于 2024-06-12 10:25:35 发布

阅读量458

点赞数

分类专栏： canvas 文章标签： html5 canvas javascript

本文链接：https://blog.csdn.net/yuemoli_19930909/article/details/118611733

版权

最近对canvas画布非常感兴趣，起初是想要实现简单的3D效果，发现有点困难，还是一步一步来了解canvas吧，做了个简单的流星小动画效果。

一、画星星

首先我们需要在画布上画上一颗闪亮的星星，这里我们封装了一个方法，传入参数x（横坐标）、y（纵坐标）、r（星星的内半径）

function draw(x, y, r) {
   
    gc.beginPath();   
    //设置是个顶点的坐标，根据顶点制定路径   
    for (var i = 0; i < 5; i++) {
      
        gc.lineTo(Math.cos((18+i*72)/180*Math.PI)*2*r+x,   
                        -Math.sin((18+i*72)/180*Math.PI)*2*r+y);   
        gc.lineTo(Math.cos((54+i*72)/180*Math.PI)*r+x,   
                        -Math.sin((54+i*72)/180*Math