HTML5 drawImage() 메서드는 캔버스에 이미지, 캔버스 또는 비디오를 그리는 데 사용됩니다. 또한 이미지의 일부를 그립니다. 이미지 크기를 늘리거나 줄이는 데 사용할 수도 있습니다.
다음은 drawImage() 메서드의 매개변수 값입니다. -
| Sr.No | drawImage() 매개변수 및 설명 |
|---|---|
| 1 | 이미지 이미지, 캔버스 또는 비디오를 지정합니다. |
| 2 | sx x 좌표는 클리핑을 시작할 위치입니다. 이것은 선택 사항입니다. |
| 3 | 시 y 좌표는 클리핑을 시작할 위치입니다. 이것은 선택 사항입니다. |
| 4 | 너비 잘린 이미지의 너비입니다. 이것은 선택 사항입니다. |
| 5 | 신장 잘린 이미지의 높이입니다. 이것은 선택 사항입니다. |
| 6 | x 캔버스에서 이미지를 배치할 x 좌표 |
| 7 | 예 캔버스에서 이미지를 배치할 y 좌표 |
| 8 | 너비 사용할 이미지의 너비입니다. |
| 9 | 높이 사용할 이미지의 높이입니다. |
예시
다음 코드를 실행하여 drawImage() 메서드를 사용하여 이미지를 그리는 방법을 배울 수 있습니다. -
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
var pattern = new Image();
function animate() {
pattern.src = '/html5/images/pattern.jpg';
setInterval(drawShape, 100);
}
function drawShape() {
// get the canvas element using the DOM
var canvas = document.getElementById('newCanvas');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext) {
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0,0,0,0.4)';
ctx.strokeStyle = 'rgba(0,153,255,0.4)';
ctx.save();
ctx.translate(150,150);
var time = new Date();
ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ( (2*Math.PI)/6000)*time.getMilliseconds() );
ctx.translate(0,28.5);
ctx.drawImage(pattern,-3.5,-3.5);
ctx.restore();
}
else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>
<body onload = "animate();">
<canvas id = "newCanvas" width = "400" height = "400"></canvas>
</body>
</html>