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

источник

2012-06-07 Muhammad Usman

Ваши изображения не имеют источника. Что вы ожидаете увидеть? –

источник - это полотна –

Ваш изображения не имеют источника. Добавьте один, если вы хотите что-то увидеть. Функция onload не может быть вызвана до тех пор, пока у вас нет src.

И вы должны предоставить изображение в функции DrawImage:

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

Если то, что вы пытаетесь сделать, это нарисовать canvas1 и canva2 на context3, просто сделать все это за пределами функции imageObj.onload, которая никогда не называли: http://jsfiddle.net/KCyvE/

прецизионных следующим вопросом в комментарии:

Моего код в скрипке использует context1.canvas. Это работает, потому что контекст является экземпляром CanvasRenderingContext2D и, следовательно, имеет свойство с именем canvas, которое является «Обратная ссылка на элемент холста, для которого был создан этот контекст».

источник

2012-06-07 12:09:21

Я хочу добавить холсты, а не изображения –

Так что не создавайте ImageObj. Если то, что вы пытаетесь сделать, это рисовать canvas1 и canva2 на context3, просто делать это за пределами функции imageObj.onload, которая никогда не вызывается. –

, то как я могу это сделать –

Ваш imageObj.onload функция несколько неправильный. Это то, что вы хотите: http://jsfiddle.net/4xT2j/3/

Обратите внимание, что нет необходимости писать canvas3 в объект изображения, поскольку он уже является объектом изображения.

источник

2012-06-07 12:21:57 bennedich

DrawImage (холст) не работает

ответ

Смежные вопросы