JavaScript透明画布
JavaScript透明画布
提问于 2022-03-30 04:52:12
我使用这个jQuery插件在画布上自由作画。
我想清除画布以重新绘制，但是在我重新绘制之后，当我单击内部画布进行重绘时，我清除的旧绘图再次出现。
$('#canvasFirst').sketch();
$('button').on("click", (evt) => {
var canvas = document.getElementById('canvasFirst');
let context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
});canvas { border: 1px solid; vertical-align: top }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mobomo/sketch.js@master/lib/sketch.min.js"></script>
<p>Draw on the below canvas, then press "clear" and try to draw again.</p>
<canvas id="canvasFirst">
</canvas>
<button>clear</button>
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-03-30 07:18:23
这个插件将所有绘图命令存储在一个actions数组中，在每个redraw上，它将遍历整个列表并再次绘制完整的内容。(这样可以避免笔划中有洞)。
医生们很难掌握，但是您可以通过.sketch("options", value)方法设置options的内容。
正如本期中所暗示的，将其设置为空数组将因此删除所有前面的命令。你所要做的就是重新绘制整个场景，现在是空的：
const $canvas = $('#canvasFirst');
$canvas.sketch();
$('button').on("click", (evt) => {
$canvas.sketch("actions", []);
$canvas.sketch("redraw");
});canvas { border: 1px solid; vertical-align: top }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mobomo/sketch.js@master/lib/sketch.min.js"></script>
<p>Draw on the below canvas, then press "clear" and try to draw again.</p>
<canvas id="canvasFirst">
</canvas>
<button>clear</button>
Stack Overflow用户
发布于 2022-03-30 06:10:51
您可以尝试将画布的状态保存为blob。例如，作为图像/png。这里有两件坏事：
- 小小的不便。将blob转换为映像和返回的方法是异步的。必须兑现承诺。
- 速度。我强烈怀疑这个解决方案是否适合于需要速度游戏、视频等的任务。
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const saveCanvasState = (canvas) => {
const ctx = canvas.getContext('2d');
ctx.save(); // save state
let blob;
return new Promise((r) => {
canvas.toBlob( // toBlob is async method
(b) => {
blob = b;
r(() =>
new Promise((r) => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();
const img = new Image();
img.addEventListener('load', () => {
URL.revokeObjectURL(img.src);
ctx.drawImage(img, 0, 0);
r();
});
img.src = URL.createObjectURL(blob);
}));
},
'image/png',
1
);
});
};
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);
saveCanvasState(canvas).then((restore) => {
ctx.fillStyle = 'black';
ctx.fillRect(150, 40, 100, 100);
ctx.fillRect(100, 40, 100, 100);
restore().then(() => {
console.log('restored, can draw');
});
});<canvas id="canvas"></canvas>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71671663
复制相关文章
相似问题
腾讯云开发者
