[英]Pre-rendering a canvas rectangle with text, is this bad performance?
It is taking up to 0.300ms to complete which is at least 2X slower than just caling the function straight without pre-rendering, I think thats quite a lot... What do you guys think? 最多需要0.300ms的时间才能完成,这比不预先渲染就直接校准函数要慢至少2倍,我认为这挺多的……您怎么看? Is this normal? 这正常吗? Am I doing this right? 我这样做对吗? Something must be wrong. 一定有问题。
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
You are still doing the drawing on your "cache" canvas so essentially you are doing the drawing + copy. 您仍在“缓存”画布上进行绘图,因此本质上您是在进行绘图+复制。 I wouldn't be surprised if it takes more then just drawing directly. 如果只需要直接绘图,我不感到惊讶。 Especially if your canvases are large and you have to copy loads of pixels. 特别是当您的画布很大且必须复制像素负载时。
Edit: Just to clarify: You do not need to implement double buffering for HTML canvas because browsers do not update canvas image on screen until your script is finished executing. 编辑:只是为了澄清:您不需要为HTML画布实现双重缓冲,因为在脚本执行完毕之前浏览器不会更新屏幕上的画布图像。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.