個人小站點：
1.關於canvas教程可以看了解關於畫線和圓形的相關步驟就行
2.canvas粒子特效要實現的效果：
當滑鼠移動時，在滑鼠周圍產生特定的粒子並連線，向四周移動，達到一定條件消失。
參考了知乎登入首頁 canvas 粒子動態效果，可配置和乙個少女心滿滿的例子帶你入門 canvas
關於動畫是使用
requestanimationframe（）函式實現的。
效果如下：
就是js**
;
(function (undefined) ;
var stars =,
canvas = document.queryselector('
canvas'),
ctx = canvas.getcontext('2d'
), width,
height;
function canvasstar(conf)
//初始化函式 例項化canvasstar 然後執行init()
var initconfig =function (conf)
};canvasstar.prototype.init =function (conf)
ctx.shadowblur = 0
; animate();
};function circlestar(id, x, y, usecache)
}circlestar.prototype =
else
},cache: function () ,
move: function ()
this
.draw();
},die: function ()
};//完成動畫重繪的過程
function animate()
requestanimationframe(animate);
}function degtorad(deg)
function setcanvassize()
setcanvassize();
//最後將外掛程式物件暴露給全域性物件
_global =(function () ());
if (typeof module !== "
undefined
" &&module.exports)
else
if (typeof define === "
function
" &&define.amd) );
} else
})();
進行初始化：
canvas特效之刮刮樂和粒子特效
刮刮樂 lang en charset utf 8 name viewport content width device width,initial scale 1.0 刮刮樂title document.title 被刮開的面積 f.tofixed 2 if f 200 script body h...
canvas實現流星特效
控制透明度變化函式 function easeinquad curtime,begin,end,duration 用平方根構建的緩慢減速運動 核心函式 x x 2 x function easeoutquad curtime,begin,end,duration function easeinout...
canvas 實現簡單的粒子運動效果
1.初始化畫布 2.再自定義建立80個圓點 數量可自定義 然後初始化 3.然後實現是在一定距離範圍內的圓點兩兩相連，並且運動起來 4.然後實現滑鼠移進出現圓點與裡面的圓點能相連 1.初始化畫布 初始化畫布 let ele document.getelementbyid my canvas ele.w...