2

最近、HTML5 Canvasの作業を始めましたが、初めてです。私は次のような問題を抱えています：

ボディチャート画像（事前定義された画像）を含むキャンバスを読み込んでいます。その上に、ユーザーはいくつかの線や形状などを描画します。

その後、次のように画像オブジェクトを生成します

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

ただし、ここでは、ユーザーがPNG画像として描画する要素（線、形状）のみを生成します。事前定義されたキャンバスの背景画像は使用されません。

キャンバスの背景画像とユーザーが入力した描画要素の両方を含むPNG画像を生成する必要があります。

これを行う方法？

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

保存しようとすると、背景画像も保存されます。

編集：あなたのコメントに応えて：

2つの異なるキャンバスを使用して、レイヤリングの問題を回避できます。1つは画像用、もう1つは描画用です。次に、絶対測位を使用してそれらを互いに重ねます。あなたはここでもっと読むことができます：画像として多くのキャンバス要素を保存します

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

レイヤリングは問題ありませんが、背景なしで図面のみを保存する場合は、2つのキャンバスを使用することをお勧めします。いつでも両方を新しいキャンバスに保存して保存できます。1つのキャンバスのみを使用すると、描画を背景から分離するのに苦労します。

于 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 に答える