Question

我的游戏中有很多激光对象。 mx＆amp;我的代表速度。我使用下面的代码从激光2像素的后面画一条线到激光的前面，它的方向是2像素。

删除函数的第一行将分析的百分比调整了〜1％，但我不喜欢它的外观。我认为我可以通过按线宽排序来优化绘图，但这似乎并不能让我感到满意。

我还能如何优化它？

Laser.prototype.draw = function(client, context) {
    context.lineWidth = Laser.lineWidth;
    context.beginPath();
    context.moveTo(this.x - this.mx * 2, this.y - this.my * 2);
    context.lineTo(this.x + this.mx * 2, this.y + this.my * 2);
    context.strokeStyle = this.teamColor;
    context.closePath();
    context.stroke();
}

Answer 1

为什么不添加它们，而不是将事物乘以2？ E.g。

context.moveTo(this.x - this.mx - this.mx, this.y - this.my - this.my);
context.lineTo(this.x + this.mx + this.mx, this.y + this.my - this.my);

测试表明，相对于乘法，imac的加法速度要快一个数量级

https://jsfiddle.net/1c85r2pq/

Answer 2

不要使用moveTo或lineTo，因为它们不使用硬件进行渲染，而且速度很慢。你的代码也是两次画线

ctx.beginPath(); // starts a new path 
ctx.moveTo(x,y);  // sets the start point of a line
ctx.lineTo(xx,yy); // add a line from x,y to xx,yy

// Not needed
ctx.closePath(); // This is not like beginPath
                 // it is like lineTo and tells the context
                 // to add a line from the last point xx,yy
                 // back to the last moveTo which is x,y

这将是已经很慢的渲染时间的一半。

使用位图绘制线条的快捷方法。

首先在开始时创建一个图像来保存用于绘制线的位图

function createLineSprite(col,width){
    var lineSprite = document.createElement("canvas");
    var lineSprite.width = 2;
    var lineSprite.height = width;
    lineSprite.ctx = lineSprite.getContext("2d");
    lineSprite.ctx.fillStyle = col;
    lineSprite.ctx.fillRect(0,0,2,width);
    return lineSprite;
}

 var line = createLineSprite("red",4); // create a 4 pixel wide red line sprite

或者您可以使用加载的图像。

要画一条线，你只需要创建一个指向线条方向的变换，并绘制该精灵线条的长度。

// draw a line with sprite from x,y,xx,yy
var drawLineSprite = function(sprite,x,y,xx,yy){
   var nx = xx-x; // get the vector between the points
   var ny = yy-y; 
   if(nx === 0 && ny === 0){ // nothing to draw
        return;
   }
   var d = Math.hypot(nx,ny); // get the distance. Note IE does not have hypot Edge does
   // normalise the vector
   nx /= d;
   ny /= d;
   ctx.setTransform(nx,ny,-ny,nx,x,y); // create the transform with x axis
                                       // along the line and origin at line start x,y
   ctx.drawImage(sprite, 0, 0, sprite.width, sprite.height, 0, -sprite.height / 2, d, sprite.height);
}

画线

drawSpriteLine(line,0,0,100,100);

完成绘制所有线条后，您可以使用

返回默认变换

ctx.setTransform(1,0,0,1,0,0);

精灵可以是任何东西，这允许非常详细的线条，非常适合游戏激光器等。

如果要绘制许多不同的颜色，则创建一个上面有许多颜色的精灵（图像），然后在线条绘制功能中只绘制具有所需颜色的精灵部分。您可以将单个像素拉伸到任意大小，这样您就可以在小位图上获得多种颜色。

我可以优化这个占用我内存分析的30％的画布绘制调用吗？

2 个答案: