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

Question

最近我开始研究 HTML5 Canvas，我对它还很陌生。 我遇到的问题如下:

我正在加载带有人体图表图像(预定义图像)的 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 时，您将很难将绘图与背景分开。