的drawImage（画布）不工作

我想用drawImage()方法来绘制一个画布上多个画布，但它不工作代码的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/

来源

2012-06-07 Muhammad Usman

你的图片没有资料。你期望看到什么？ –

源是画布 –

你图像没有来源。如果你想看到什么，请添加一个。只要没有src，就不能调用onload函数。

而且你必须提供图像的drawImage方法：

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

如果你正在尝试做的是汲取上下文3 canvas1和canva2，简单地做这一切的imageObj.onload功能是外从来没有所谓：http://jsfiddle.net/KCyvE/

按照评论问题答精度：

我在小提琴代码使用context1.canvas。这是有效的，因为上下文是CanvasRenderingContext2D的一个实例，因此具有名为canvas的属性，该属性是“对创建了该上下文的画布元素的返回引用”。

来源

2012-06-07 12:09:21

我想添加画布没有任何图像 –

所以不要创建一个ImageObj。如果你想要做的是在context3上绘制canvas1和canva2，只需在imageObj.onload函数之外完成所有这些，这是永远不会调用的。 –

然后我该怎么做 –

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

请注意，没有必要将canvas3写入图像对象，因为它已经是一个图像对象。

来源

2012-06-07 12:21:57 bennedich

的drawImage（画布）不工作

回答

相关问题