1

メソッドを使用して単一のキャンバスに複数のキャンバスを描画したいのですdrawImage()が、機能していません コード

<html>
 <head>
  <script>
    window.onload = function() {
    var context1= document.getElementById("canvas1").getContext("2d");
    var context2  = document.getElementById("canvas2").getContext("2d");
    var context3  = document.getElementById("canvas3").getContext("2d");

    context1.font = "20pt Calibri";
    context1.fillStyle = "blue";
    context1.fillText("Hello ", 50, 25);

    context2.font = "20pt Calibri";
    context2.fillStyle = "red";
    context2.fillText("World!", 100, 25);

    var imageObj = new Image();
     imageObj.onload = function() {
      context3.drawImage(context1.canvas, 50, 25);
      context3.drawImage(context2.canvas, 100, 25);
        };
  };

</script>
 </head>
<body>
<canvas id="canvas1" class="canvas" width="200" height="50"></canvas>
<canvas id="canvas2" class="canvas" width="200" height="50"></canvas>
<canvas id="canvas3" class="canvas" width="200" height="50"></canvas>
</body>
</html>​

JSフィドル http://jsfiddle.net/4xT2j/2/

4

2 に答える 2

5

画像にソースがありません。何かを見たい場合は追加してください。srcがない限り、onload関数を呼び出すことはできません。

そして、drawImage関数に画像を提供する必要があります：

 var imageObj = new Image();
 imageObj.onload = function() {
   context3.drawImage(imageObj, 50, 25);
   context3.drawImage(imageObj, 100, 25);
 };
 imageObj.src = "someFile.png";

あなたがやろうとしているのがcontext3にcanvas1とcanva2を描くことであるなら、これは決して呼び出されないimageObj.onload関数の外で行うだけです：http：//jsfiddle.net/KCyvE/

コメントの質問に続く精度：

フィドルの私のコードはを使用していますcontext1.canvas。これが機能するのは、コンテキストがCanvasRenderingContext2Dcanvasのインスタンスであり、「このコンテキストが作成されたキャンバス要素への後方参照」という名前のプロパティがあるためです。

于 2012-06-07T12:09:21.103 に答える
1

あなたのimageObj.onload機能はやや間違っています。これはあなたが望むものです：http：//jsfiddle.net/4xT2j/3/

すでに画像オブジェクトであるため、canvas3を画像オブジェクトに書き込む理由は必ずしもないことに注意してください。

于 2012-06-07T12:21:57.763 に答える