Javascript 如何在画布上擦除而不擦除背景
我有一个画布,我Javascript 如何在画布上擦除而不擦除背景,javascript,html,canvas,Javascript,Html,Canvas,我有一个画布,我drawimage()作为背景 我有一个橡皮擦工具,我想用它可以擦除我画的东西,但不能擦除画布上的图像。我知道可以将图像作为单独的元素放置在画布后面,但这不是我想要的,因为我希望将画布中的内容保存为图像 我的绘图功能如下: function draw (event) { if (event == 'mousedown') { context.beginPath(); context.moveTo(xStart, yStart);
drawimage()
作为背景
我有一个橡皮擦工具,我想用它可以擦除我画的东西,但不能擦除画布上的图像。我知道可以将图像作为单独的元素放置在画布后面,但这不是我想要的,因为我希望将画布中的内容保存为图像
我的绘图功能如下:
function draw (event) {
if (event == 'mousedown') {
context.beginPath();
context.moveTo(xStart, yStart);
} else if (event == 'mousemove') {
context.lineTo(xEnd, yEnd);
} else if (event == 'touchstart') {
context.beginPath();
context.moveTo(xStart, yStart);
} else if (event == 'touchmove') {
context.lineTo(xEnd, yEnd);
}
context.lineJoin = "round";
context.lineWidth = gadget_canvas.radius;
context.stroke();
}
如果我需要进一步解释,我会的
提前谢谢你。有几种方法可以解决这个问题 我建议将图像作为画布的CSS“背景图像”。然后像平常一样在画布上画画 如果要将画布另存为图像,则需要执行一系列事件:
ctx2.drawImage(can1,0,0)
//在新画布上绘制第一个画布ctx.clearRect(0,0,宽度,高度)
//清除第一个画布ctx.drawImage(背景,0,0)
//在第一块画布上绘制图像ctx.drawImage(can2,0,0)
//将(保存的)第一个画布绘制回自身这将让您两全其美。我将图像路径保存在数组中,当我清除画布时,我再次调用init函数:
$( ".clear_canvas" ).click(function() {
console.log("clear");
var canvas = document.getElementById("canvasMain"),
ctx=canvas.getContext("2d");
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
//load the image again
init(path,width,height);
});
你的描述听起来有点不对劲。你不能在画布上放置一个图层,然后“保存”图层组合,这样可以保留背景图像(画布)元素吗?
context
是一个全局可用的对象吗?在每次重画时,你需要先绘制图像-作为背景-然后在顶部绘制其他所有内容。这样,当您从“上层”删除某些内容时,图像将保持完整(因为每次重画时总是先绘制)。您还可以像这样查看画布抽象库。将图像保留到背景后,将画布另存为图像时,它将不会被捕获。。对我来说,drawImage对我不起作用。。。你可以查。。。也要求你检查一下