使用结构修改画布.js而不删除现有内容

Question

在我的网页中，有一个包含一些内容的画布，这些内容是单独呈现的（不使用 fabric.js）。

我想做的是使用fabric在现有内容的基础上添加一些内容.js。我尝试按如下方式执行此操作（示例代码），

var canvas = new fabric.Canvas('c');
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120 });
canvas.add(path);

但它将从画布中删除现有内容。

你能帮我吗？

Answer 1

使用 Jason Maggard 建议的 canvas.toDataURL（） 函数：

var c = document.getElementById('c');
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,c.width,c.height);
var bg = c.toDataURL("image/png");
var canvas = new fabric.Canvas('c');
canvas.setBackgroundImage(bg,canvas.renderAll.bind(canvas));
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120 });
canvas.add(path);

即使在添加 fabricjs 代码后，红色背景也应该仍然存在。你也可以使用 canvas.toDataURL（） 函数作为动态图像的 src，如果你想能够移动它/等等。

var c = document.getElementById('c');
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,c.width,c.height);
var img = new Image();
img.src = c.toDataURL("image/png");
var canvas = new fabric.Canvas('c');
var oldCanvas = new fabric.Image(img,{ width: c.width, height: c.height });
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120 });
canvas.add(oldCanvas);
canvas.add(path);