6.用canvas绘制漫天飞舞的雪花1

附:用canvas绘制漫天飞舞的雪花2
用canvas绘制漫天飞舞的雪花3

效果预览:https://codepen.io/andy-js/pen/OJPzpdE
建议右键新标签或窗口打开预览

今天看到 comehope老师发表的 用纯 CSS 绘制一朵美丽的雪花
心血来潮 ,即用canvas也画了一个样的。

1.首先我们创建一个canvas并将背景涂黑
将00坐标映射到正中间后,通过以前讲过的旋转画布的方法,可以绘制出简单的六个主干线和顶端圆。

  

6.用canvas绘制漫天飞舞的雪花1_第1张图片

  1. 这个时候应该画每一主干上的支线。
    以之前的方法同理,也是在旋转之前计算好位置

贴出全代码




    
    
    
    andy-js:用canvas绘制一朵美丽的雪花
    


  


要旋转,就将CSS中的动画打开就即可。
6.用canvas绘制漫天飞舞的雪花1_第2张图片

在下一篇文章中,我计划封成JS方法,来绘制一个满天飞舞的雪花效果。

你可能感兴趣的:(javascript,前端,canvas)