css - 带有预定义图像的 HTML5 Canvas

Question

最近我开始研究 HTML5 Canvas，我是新手。我有如下问题:

我正在加载带有 body 图表图像(预定义图像)的 Canvas ，用户将在该 Canvas 上绘制一些线条、形状等。

之后我将生成一个图像对象如下

var canvas = document.getElementById("MyCanvas");
var dataURL = canvas.toDataURL();
var image = new Image();
image.src = dataURL;

但是，这里它只生成用户绘制的那些元素(线条、形状)作为 PNG 图像。它不会采用预定义的 Canvas 背景图像。

我需要生成一个 PNG 图像，其中应包含 Canvas 背景图像以及用户输入的绘图元素。

如何做到这一点？

Answer 1

尝试使用这些函数将图像实际绘制到 Canvas 上:

  var canvas = document.getElementById("MyCanvas");
  var img = new Image();
  img.src = 'pathToYourImageHere';
  canvas.drawImage(img,0,0); /* 0,0 is x and y from the top left */

当您现在尝试保存它时，它应该还会保存您的背景图像。

编辑:回应您的评论:

您可以使用两个不同的 Canvas 来解决分层问题。一张用于图像，一张用于绘图。然后使用绝对定位将它们层叠在一起。您可以在此处阅读更多信息:Save many canvas element as image

编辑2:但实际上你不应该有分层问题，因为下面的代码会先绘制图像，然后绘制圆弧，分层就可以了:

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = "somePathToAnImage";
context.drawImage(imageObj, 50, 50);   

var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "red";
context.stroke();  

即使分层很好，您最好使用两个 Canvas ，以防您只想保存绘图而没有背景。您始终可以将两者都保存到新的 Canvas 中并保存它，当您只使用一个 Canvas 时，您将很难将绘图与背景分开。