帶有預定義圖像的HTML5畫布

最近我開始研究HTML5 Canvas，我對它很陌生。我有一個問題，如下所示：帶有預定義圖像的HTML5畫布

我加載與人體圖圖像（預定義圖像）一個帆布和對用戶會畫一些線條，形狀等

之後，我會產生的圖像對象如下

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

但是，這僅產生其由用戶（線條，形狀）作爲PNG圖像繪製的那些元素。它不會採用該預定義畫布背景圖像。

我需要生成一個PNG圖像，它應該包含Canvas背景圖像以及用戶輸入的繪圖元素。

如何做到這一點？

來源

2012-05-08 Shreekumar S

如何繪製畫布背景圖片？ –

此前我添加了CSS Background-Image屬性。 –

嘗試實際吸引你的圖像到你的畫布，利用這些功能：

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

現在，當您試圖保存它，它也應該保存您的背景圖像。

編輯：針對您的評論：

您可以通過使用兩種不同的畫布circument您的分層的問題。一個用於圖像，另一個用於繪圖。然後使用絕對定位將它們疊加在一起。你可以在這裏閱讀更多：Save many canvas element as image

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-08 06:41:14

我試過這個，它加載了我的預定義圖像，但我不能在那上面繪製。我的圖紙將在此下移動（圖層問題） –

這是因爲圖片需要加載時間，您必須使用的功能。

imgObj.onload = function() { context.drawImage(imageObj, 50, 50); imgLoaded = true;} if (imgLoaded) { /*you draw shapes here */ }

來源

2012-05-08 10:43:30 jazzytomato

帶有預定義圖像的HTML5畫布

回答

相關問題