的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（畫布）不工作

回答

相關問題