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. 这是有效的，因为上下文是CanvasRenderingContext2D的一个实例，因此具有一个名为canvas“对创建此上下文的画布元素的反向引用”的属性。

于 2012-06-07T12:09:21.103 回答
1

您的imageObj.onload功能有些错误。这就是你想要的：http: //jsfiddle.net/4xT2j/3/

请注意，不一定有理由将 canvas3 写入图像对象，因为它已经是图像对象。

于 2012-06-07T12:21:57.763 回答