canvas之星空效果

Posted 2021-04-30 web前端课堂

置顶 web前端课堂  海量的知识点和精选的技术解析

先看效果图

原理

1、添加180个点，随机x坐标，随机初始旋转速度和加速度

exp = 5;
for(i=0; i<particles; i++){//循环180个点
    point = {};
    exp = exp*(Math.floor(Math.random()*12)/100+1);
    point.x = exp;//初始化点的 x坐标值
    point.r0 = Math.floor(Math.random()*50)/10+1;
    point.r = Math.floor(Math.random()*Math.PI)+1;
    pointers[pointers.length] = point;
}

2、每次渲染点并旋转画布 ，同时把画布之前渲染的点a值变成0.03，就会出现小尾巴的效果

context.fillStyle = "rgba(0,0,0,0.03)";//每次添加画布 之前渲染的点 a值 变成0.03就会出现阴影效果

3、遍历数组，每次执行画180个点到画布上，每次执行改变180的旋转值

i=0;
while(i<pointers.length){
    context.save();
    context.translate(pointX,pointY);//画布移到屏幕中心点
    context.rotate(pointers[i].r*0.1);
    pointers[i].r = pointers[i].r+pointers[i].r0*0.05;
    context.fillRect(pointers[i].x,0,1,1);
    context.restore();
    i++;
}
requestAnimationFrame(drawNew);

结束语：

这个效果只用了60行代码，其实，canvas没有大家想想的那么难，只要分析得当，条例清晰，你自己也可以成为大神，编写出各种有趣的效果。如需源代码，关注 web前端课堂，即可获得百度分享demo

如果大家有什么不会的地方可以留言，小编会耐心的给大家讲解