при использовании двойной буферизации для рисования изображения на холсте, не получается получить полное изображение? - PullRequest
Новая
       64

при использовании двойной буферизации для рисования изображения на холсте, не получается получить полное изображение?

0 голосов
/ 20 февраля 2019

это мой код, я использую два холста для рисования, чтобы избежать мерцания, но я не могу получить полное изображение при использовании этого способа, кто-нибудь может помочь, пожалуйста?если я использую только один холст, изображение отображается нормально, кажется, что вторичный холст, созданный 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>

1 Ответ

0 голосов
/ 20 февраля 2019

Я изменяю 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>
...