drawImage（畫布）不起作用
[英]drawImage (canvas) is not working
問題描述
我想用一個單一的畫布上繪制多個畫布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>
2 個解決方案
解決方案1
5 已采納 2012-06-07 12:09:21
您的圖片沒有來源。 如果您想看些東西，請添加一個。 只要您沒有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元素的反向引用” 。
解決方案2
1 2012-06-07 12:21:57
您的imageObj.onload函數有些錯誤。 這就是您想要的： http : //jsfiddle.net/4xT2j/3/
請注意，沒有必要將canvas3寫入圖像對象，因為它已經是圖像對象。
canvas的drawImage方法不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.