Canvas<粒子svg效果>

效果图:

202003191647.gif

想了解基础的,可参考文章https://www.jianshu.com/p/e2f463fa57af

注意:.getImageData 在本地都会出现跨域问题,所以要发布到服务器上才能看到粒子效果

🎈此篇文章着重的是对图片,svg等的粒子渲染,可以直接去 iconfont 官网去下载 svg

图片添加方法:
之所以要封装一下,是因为要确认 img.onload 完成后,再去执行下面的方法

    //添加图片处
    function addIMG() {
        return new Promise(reslove => {
            var img = new Image();
            //引入图片地址
            img.src = "logo.svg"
            img.onload = function () {
                ctx.drawImage(img, w / 2 - 100, h / 2 - 100, 200, 200);
                reslove()
            }

        })
    }
image.png
image.png

后来的基本就是沿用粒子文本的效果进行添加粒子覆盖和鼠标移动特效,所以此处就不废话了

代码如下:
还有 72% 的精彩内容

推荐阅读更多精彩内容