怎樣用canvas做出粒子噴泉動畫的效果

來源:互聯網
上載者:User
這次給大家帶來用canvas做出粒子噴泉動畫的效果,怎樣用canvas做出粒子噴泉動畫,canvas座粒子噴泉動畫需要注意哪些方面,接下來先做一個小案例

<!DOCTYPE html><html ><head>  <meta charset="UTF-8">  <title>canvas粒子噴泉動畫</title>         <meta name="keywords" content=" canvas粒子噴泉動畫" />         <meta name="description" content=" canvas粒子噴泉動畫" />         <link rel="stylesheet" href="css/style.css"></head><body><div>滑鼠點擊,增加粒子噴泉效果</div><canvas id="fireworks"></canvas><script src="js/index.js"></script></body></html>Css部分:body,html,canvas {  margin: 0;  padding: 0;  background-color: #111;  overflow: hidden;} canvas {  background-color: transparent;  position: relative;  z-index: 2;} .text {  position: absolute;  left: 0;  top: 20px;  width: 100%;  text-align: center;  font-size: 3.7vw;  color: #fff;  z-index: 1;  opacity: 0.2;}
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.