HTML5 캔버스 내가 가진 이미지를 그릴 어디 캔버스가 인라인 국경

Question

로 이미지를 그릴?

Answer 1

당신은 당신이 실제로 대답은 두 가지 시나리오에 대한 일반적인 될의 drawImage() 메소드에 대한 인수로 사용하는 것을 보여주는하지 않는 것처럼 : 이미지가 전체 캔버스가이 같은 것을 사용할 수 있습니다 포함하면

:

ctx.strokeStyle = '#f00'; // some color/style 
ctx.lineWidth = 2;   // thickness 
ctx.strokeRect(0, 0, ctx.canvas.width, ctx.canvas.height); 

이미지를 그린 후에.

그냥 strokeRect() 방법에 대해 동일한 값을 사용하여 이미지에 대해 서로 다른 크기와 위치를 사용하는 경우 :

ctx.drawImage(img, 100, 100, 250, 100); 
ctx.strokeRect(100, 100, 250, 100); 

또는

ctx.drawImage(img, x, y, w, h, 100, 100, 250, 100); 
ctx.strokeRect(100, 100, 250, 100);