2

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

我正在加载带有人体图表图像（预定义图像）的画布，用户将在该画布上绘制一些线条、形状等。

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

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

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

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

这个怎么做？

4

2 回答 2

2

尝试使用以下功能将图像实际绘制到画布上：

  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 */

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

编辑：回应您的评论：

您可以通过使用两个不同的画布来解决分层问题。一个用于图像，一个用于您的绘图。然后使用绝对定位将它们层叠在一起。您可以在此处阅读更多内容：将许多画布元素另存为图像

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

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();

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

于 2012-05-08T06:41:14.480 回答
0

这是因为图像需要时间来加载，你必须使用onload函数。

imgObj.onload = function() { context.drawImage(imageObj, 50, 50); imgLoaded = true;}
if (imgLoaded) { /*you draw shapes here */ }
于 2012-05-08T10:43:30.963 回答