2012-06-07 4 views
1

작동하지 않습니다 내가 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/

+0

이미지에 소스가 없습니다. 너는 무엇을 기대하고 있니? –

+0

소스가 캔버스입니다 –

답변

5

작동하지 귀하 이미지에는 소스가 없습니다. 뭔가보고 싶으면 하나 추가하십시오. src가없는 한 onload 함수를 호출 할 수 없습니다.

그리고 당신은의 drawImage 함수에 대한 이미지를 제공해야합니다 : 무엇을 당신이하려는 것은 context3에 canvas1 및 canva2을 그릴 경우

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

, 단순히 인 imageObj.onload 기능 이외의 모든이 작업을 수행을 결코 호출되지 : 코멘트에 질문 다음 http://jsfiddle.net/KCyvE/

정밀 : 바이올린에

내 코드 context1.canvas를 사용합니다. 이것은 컨텍스트가 CanvasRenderingContext2D의 인스턴스이고 따라서 이라는 속성이 있으며이 컨텍스트가 만들어진 캔버스 요소에 대한 역 참조이 입니다.

+0

캔버스를 추가하고 싶습니다. –

+0

ImageObj를 만들지 마십시오. 만약 당신이하려는 일은 canvas1과 canva2를 context3에 그려야한다. 결코 호출되지 않는 imageObj.onload 함수 밖에서 모든 작업을 수행하면된다. –

+0

그러면 어떻게 할 수 있습니까? –

1

imageObj.onload 기능이 다소 잘못되었습니다. 이것은 당신이 원하는 것입니다 : http://jsfiddle.net/4xT2j/3/

이미 이미지 객체이기 때문에 canvas3를 이미지 객체에 쓸 필요는 없습니다.