在canvas上使用双缓冲绘制图像时，无法得到完整的图像？

Question

这是我的代码，我使用两个canvas来绘制图像以避免闪烁，但我无法通过这种方式获得完整的图像，有人可以帮忙吗？如果我只使用一个 canvas 图像显示正常，似乎由 Javascript 创建的第二个 canvas 显示图像有问题，但我找不到问题所在。感谢您的帮助！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Decorate</title>
</head>
<body>
<div class="content-box">
<canvas id="canvas" width="360" height="740" style="border:1px solid #d3d3d3"></canvas>

</div>
<script>
var c=document.getElementById("canvas");
var ctx = c.getContext("2d");

var secondaryCanvas=document.createElement("canvas");
var secondaryCtx=secondaryCanvas.getContext("2d");
secondaryCanvas.weight=c.weight;
secondaryCanvas.height=c.height;
var bgimg=new Image();
bgimg.src=imageEncoder[24].background;
bgimg.onload=function() {
secondaryCtx.drawImage(bgimg, 0, 0);
ctx.drawImage(secondaryCanvas,0,0);
}
</script>
</body>
</html>

Answer 1

我将 secondaryCanvas.weight=c.weight; 更改为 secondaryCanvas.width=c.width;，您的代码现在似乎可以工作了。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Decorate</title>
</head>
<body>
<div class="content-box">
<canvas id="canvas" width="360" height="740" style="border:1px solid #d3d3d3"></canvas>

</div>
<script>
var c=document.getElementById("canvas");
var ctx = c.getContext("2d");

var secondaryCanvas=document.createElement("canvas");
var secondaryCtx=secondaryCanvas.getContext("2d");

secondaryCanvas.width=c.width;
secondaryCanvas.height=c.height;



var bgimg=new Image();
bgimg.src= "https://picsum.photos/360/740"
bgimg.onload=function() {
secondaryCtx.drawImage(bgimg, 0, 0);
ctx.drawImage(secondaryCanvas,0,0);
}
</script>
</body>
</html>

在canvas上使用双缓冲绘制图像时，无法得到完整的图像？

when using double buffering to draw image on canvas, cannot get the complete image?

html

javascript

drawimage

html5-canvas

html5boilerplate