使用双缓冲在画布上绘制图像时，无法获得完整的图像？答案

【问题标题】：when using double buffering to draw image on canvas, cannot get the complete image?使用双缓冲在画布上绘制图像时，无法获得完整的图像？
【发布时间】：2019-07-13 15:59:19
【问题描述】：

这是我的代码，我使用两个画布来绘制图像以避免闪烁，但是使用这种方式时我无法获得完整的图像，有人可以帮忙吗？如果我只使用一个画布图像显示正常，似乎由 Javascript 创建的辅助画布在显示图像时出现了一些问题，但我找不到问题所在。任何帮助表示赞赏！

<!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>

【问题讨论】：

体重？你是说宽度吗？
运行这段代码会发生什么？预期的结果是什么？实际结果如何？考虑使用代码 sn-p 编辑器将其转换为重现问题的工作示例。

标签： javascript html html5-canvas drawimage html5boilerplate

【解决方案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>

【讨论】：