绘制海葵发光效果时,画面变得十分不流畅,怎么办?

来源:3-9 总结

JSAL

2016-08-29 19:12

我用shadowColor和shadowBlur来增加海葵的发光效果,但加上后游戏性能出现了很大的问题,画面不流畅。为了把海葵发光效果设置提到循环外,尝试另开一个canvas画海葵,但还是很卡。不知道有没有人做海葵的效果,关于这个问题有没有什么解决思路呢?

附 Ane的draw方法

AneObj.prototype.draw = function  () {

ctx2.save();

ctx2.globalAlpha = 0.6 ;

ctx2.strokeStyle = "#3b154e";

ctx2.lineCap = "round";

ctx2.lineWidth = 20;

// ctx2.shadowColor = "#fff";

// ctx2.shadowBlur = 3;

this.alpha += deltaTime * 0.0015;

var l = Math.sin(this.alpha);

for (var i = this.num; i > 0; i--) {

ctx2.beginPath();

ctx2.moveTo(this.rootx[i], can_h);

this.headx[i] = this.rootx[i] + l * this.amp[i];

ctx2.quadraticCurveTo(this.rootx[i], this.heady[i]+50 ,this.headx[i] , this.heady[i]);

ctx2.stroke();

};

ctx2.restore();

};


写回答 关注

1回答

  • supjtr
    2016-10-11 16:33:33

    for(var i=0; i<this.num; i++){

    if(this.alive[i]){

    //draw

    this.r[i] += deltaTime*0.04;

    if(this.r[i]>50){

    this.alive[i] = false;

    continue;

    }

    var alpha = 1 - this.r[i]/50;

    ctx1.beginPath();

    ctx1.arc(this.x[i], this.y[i], this.r[i], 0, Math.PI*2);

    ctx1.closePath();

    ctx1.strokeStyle = "rgba(255, 255, 255,"+ alpha +")";

    ctx1.stroke();

    }

    }


HTML5小游戏---爱心鱼(下)

通过一个清新美好的小游戏教程,熟悉游戏开发流程

46272 学习 · 189 问题

查看课程

相似问题