canvas根据图片生成粒子动画
效果展示：
canvas根据图片生成粒子动画效果
注意： js和css的引入
id： cartoonDot-img对应的是被 拷贝的图像，后期要替换的 粒子图像就在这
min.js 地址
HTML代码块
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>canvas粒子动画</title><link rel="stylesheet" href="css/style.css"></head><body><div class="bannerwrap"><div class="banner"><img src="img/bannerOne1.png" class="bg01"/><img src="img/bg004.png" class="bg02"/><img src="img/bg004.png" class="bg03"/></div><div class="banner-dot"><canvas id="cartoonDot-text"></canvas></div><div class="banner-cont"><div class="contain"><div class="banner-cont-dot"><img id="cartoonDot-img" src="img/zw.png" alt="" /></div><div class="banner-cont-wrap"><p>P is one of the necessary nutrition elements for plant growing</p></div></div></div></div><script src="js/jquery.js"></script><script src="js/min.js"></script></body>
</html>
style.css代码块
body,input,h1,h2,h3,h4,h5,h6,b,c,e,i,g,p,div,dl,dt,dd,select,textarea,font,right,left{ margin:0; padding:0;color:#555; font-size:12px;font-family:Arial,Source; line-height:1;font-weight: normal;letter-spacing: 0;}
html,body{height:100%;position:relative;width: 100%;background-color: #ffffff;}
img{display: block;}
a{ color:#333; text-decoration:none;}
ul, ol, li, dl, dd {margin: 0;padding: 0; list-style:none;}
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6,span,dd,dt,b,c,e,a,font,right,left{ -webkit-text-size-adjust:100%;}
.fl{float: left;}
.fr{float: right;}
.clearfix:after{display: block;content: '';clear: both;}
.bg_big{width: 100%;height: auto;background-color: #f8f8f8;font-family: arial;}/* bannerwrap */
.bannerwrap{width: 100%;height: 100%;position: relative;overflow: hidden;}
.banner{width: 100%;height: 100%;position: relative;z-index: 1;pointer-events: none;}
.banner img.bg01{width: 100%;height: 100%;object-fit: cover;position: absolute;left: 0;top: 0;}
.banner img.bg02{position: absolute;left: 20%;bottom: 50%;width: 100%;}
.banner img.bg03{position: absolute;left: 0;top: -10%;width: 100%;}
.banner-dot{position: absolute;width: 100%;height: 100%;top: 0;left: 0;}
.banner-dot #cartoonDot-text{width: 100% !important;height: 100% !important;}
.banner-cont{position: absolute;width: 100%;color: #fff;height: 100%;top: 0;left: 0;z-index: 2;pointer-events: none;display: flex;align-items: center;justify-content: center;}
.banner-cont{width: 100%;text-align: center;}
.banner-cont-wrap{width: 100%;}
.banner-cont-wrap p{font-size: 24px;color: #fff;line-height: 30px;margin-top: 50px;}
.banner-cont-dot{width: 460px;margin: auto;}
.banner-cont-dot img{width: 100%;visibility: hidden;}
