具有预定义图像的HTML5画布 [英] HTML5 Canvas with Predefined Image

问题描述

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

我正在加载一个Canvas与身体图图像（预定义图像），用户将绘制一些线条，形状等。

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

  var canvas = document.getElementById（MyCanvas）; 
 var dataURL = canvas.toDataURL（）; 
 var image = new Image（）; 
 image.src = dataURL; 
  

但是，这里只生成那些由用户绘制的元素。它不会采取预定义的画布背景图像。

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

如何做到这一点？

解决方案

使用这些函数：

  var canvas = document.getElementById（MyCanvas）; 
 var img = new Image（）; 
 img.src ='pathToYourImageHere'; 
 canvas.drawImage（img，0,0）; / * 0,0是左上角的x和y * / 
  

当您现在尝试保存

编辑：
回应您的评论：

您可以使用两个不同的画布来显示您的分层问题。一个用于图像，一个用于绘图。然后使用绝对定位将它们层叠在彼此之上。
您可以在这里阅读更多：将许多画布元素保存为图像

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（）; 
  

即使分层是好的，你会更好的使用两个画布，喜欢只保存绘图，没有背景。你可以随时将它们保存到一个新的画布中，并保存，当你只使用一个画布，你会很难从背景中分离绘图。

Recently I started working on HTML5 Canvas, I'm new to it. I've a problem as follows:

I'm loading a Canvas with Body Chart Image (Predefined Image) and on that User will Draw some lines, shapes, etc.

After that I'll generate an image object as follows

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

But, Here it generates only those elements which are drawn by users (lines, shapes) as PNG Image. It won't take that Predefined canvas background Image.

I need to generate a PNG image which should include both the Canvas background Image as well as User entered drawing elements.

How to do this?

解决方案

Try to actually draw you image onto your canvas, utilizing these functions:

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

When you now try to save it, it should also save your background image.

EDIT: In response to your comment:

You can circument your layering problem by using two different canvases. One for the image, and one for your drawing. Then layer them on top of each other using absolute positioning. You can read more here: Save many canvas element as image

EDIT2: But actually you shouldn't have a layering problem, since the following code will first draw the image and then draw the arc, and the layering will be fine:

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

Even though the layering is fine, you will be better of by using two canvases, in case you would like to only save the drawing, without the background. You can always save both into a new canvas and save that, when you only use one canvas you'll have a hard time separating the drawing from the background.

这篇关于具有预定义图像的HTML5画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！