|
代碼實(shí)現(xiàn)說明 1.創(chuàng)建畫布與圖片 - // 創(chuàng)建畫布
- var ctx = canvas.getContext('2d');
- // 創(chuàng)建圖片對象
- var heartImage = new Image();
2.創(chuàng)建愛心對象 type參數(shù)為0就顯示隨機(jī)文字，否則只顯示愛心不顯示文字 - function Heart(type){
- this.type = type;
- // 初始化生成范圍
- this.x = Math.random() * wW;
- this.y = Math.random() * wH;
-
- this.opacity = Math.random() * .5 + .5;
-
- // 偏移量
- this.vel = {
- x: (Math.random() - .5) * 5,
- y: (Math.random() - .5) * 5
- }
-
- this.initialW = wW * .5;
- this.initialH = wH * .5;
- // 縮放比例
- this.targetScale = Math.random() * .15 + .02; // 最小0.02
- this.scale = Math.random() * this.targetScale;
-
- // 文字位置
- this.fx = Math.random() * wW;
- this.fy = Math.random() * wH;
- this.fs = Math.random() * 10;
- this.text = getText();
-
- this.fvel = {
- x: (Math.random() - .5) * 5,
- y: (Math.random() - .5) * 5,
- f: (Math.random() - .5) * 2
- }
- }
3.通過愛心繪制方法在畫布上繪制愛心圖片的位置 - Heart.prototype.draw = function(){
- ctx.save();
- ctx.globalAlpha = this.opacity;
- ctx.drawImage(heartImage, this.x, this.y, this.width, this.height);
- ctx.scale(this.scale + 1, this.scale + 1);
- if(!this.type){
- // 設(shè)置文字屬性
- ctx.fillStyle = getColor();
- ctx.font = 'italic ' + this.fs + 'px sans-serif';
- // 填充字符串
- ctx.fillText(this.text, this.fx, this.fy);
- }
- ctx.restore();
- }
- // 愛心變動
- Heart.prototype.update = function（）
4.使用定時器實(shí)時繪制愛心 - function render(){
- ctx.clearRect(0, 0, wW, wH);
- for(var i = 0; i < hearts.length; i++){
- hearts[i].draw();
- hearts[i].update();
- }
- requestAnimationFrame(render);
- }
|
收藏
點(diǎn)贊
反對
