Question

我想使用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 Fiddle http://jsfiddle.net/4xT2j/2/

Answer 1

您的图片没有来源。如果你想看到一些东西，请添加一个。只要您没有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的属性，它是“对创建此上下文的canvas元素的后向引用”

Answer 2

您的imageObj.onload功能有点不对劲。这就是你想要的：http://jsfiddle.net/4xT2j/3/

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

drawImage（canvas）不起作用

2 个答案: