Question

这需要花费0.300毫秒来完成，这比仅仅在没有预渲染的情况下直接调用函数慢至少2倍，我认为这相当多......你们怎么想？这是正常的吗？我这样做了吗？有些事情一定是错的。

function complexDraw(ctx){
    ctx.fillStyle = "Black";
    ctx.fillRect(90 * Xf, 380 * Yf, 200 * Xf, 30 * Yf);//k10
    ctx.fillStyle = "White";
    ctx.font = pixels + "px monospace";
    ctx.textAlign = "center";
    ctx.fillText("Left: " + currentremain, 185 * Xf, 400 * Yf);
}

function cloneCanvas(oldCanvas) {

    //create a new canvas
    var newCanvas = document.createElement('canvas');
    var context = newCanvas.getContext('2d');

    //set dimensions
    newCanvas.width = oldCanvas.width;
    newCanvas.height = oldCanvas.height;

    //apply the old canvas to the new one
    context.drawImage(oldCanvas, 0, 0);

    //return the new canvas
    return newCanvas;
}

var cacheCanvas = cloneCanvas(a_canvas); // newCanvas
var cacheCtx = cacheCanvas.getContext('2d'); // context


var draw = function draw(){
    complexDraw(cacheCtx); //updates text each time
    ctx.drawImage(cacheCanvas,0,0);
}

console.time("new");
draw();
console.timeEnd("new")// 0.300ms

Answer 1

您仍在使用＆＃34;缓存＆＃34;画布基本上你正在做绘图+复制。如果它需要更多，然后直接绘制，我不会感到惊讶。特别是如果你的画布很大，你必须复制大量的像素。

编辑：只是为了澄清：您不需要为HTML画布实现双缓冲，因为在您的脚本执行完毕之前，浏览器不会在屏幕上更新画布图像。

使用文本预渲染画布矩形，这是不是很糟糕的表现？

1 个答案: