캔버스에 이미지를 추가하려면 어떻게해야합니까?

-3

저는 캔버스에 그림을 추가하는 방법을 알아 내려고 노력했지만 시도한 모든 것은 효과가 없습니다. 어떤 아이디어?캔버스에 이미지를 추가하려면 어떻게해야합니까?

HTML :

<body> 
<canvas id="gl-canvas" width="800" height="600" style="float:left"></canvas>

내가 별도의 JS 파일을 가지고 있지만 내가 제대로 기능을 적용하는 방법을 알아낼 수 없기 때문에 여기에 추가하기 위해 필요한 생각하지 않습니다.

var canvas = document.getElementById('gl-canvas'), 
context = canvas.getContext('2d'); 

make_base(); 

function make_base() 
{ 
    base_image = new Image(); 
    base_image.src = 'img/base.png'; 
    base_image.onload = function(){ 
    context.drawImage(base_image, 100, 100); 
    } 
}

나는 내가 '2D'요소에 대한 변수를 만들 필요가 있는지 확실하지 않습니다 :

나는이 비슷한을 적용하기 위해 노력했습니다. 생각?

추신. 이게 내 첫 번째 질문입니다. 그래서 내가 잘못한 것을 유감스럽게 생각합니다. 도와 주셔서 감사합니다!

출처

2017-12-02 Brian Arias

당신은 appendChild를 사용하여 캔버스에 이미지를 추가해야합니다

var canvas = document.getElementById('gl-canvas'), 
 
context = canvas.getContext('2d'); 
 

 
make_base(); 
 

 
function make_base() 
 
{ 
 
    var base_image = new Image(); 
 
    base_image.src = 'http://via.placeholder.com/350x150'; 
 
    base_image.onload = function(){ 
 
    context.drawImage(base_image, 100, 100); 
 
    canvas.appendChild(base_image); 
 
    } 
 
}

<canvas id="gl-canvas" width="800" height="600" style="float:left"></canvas>

출처

2017-12-02 05:02:46

캔버스에 이미지를 추가하려면 어떻게해야합니까?

답변

관련 문제