Phương thức HTML5 drawImage () được sử dụng để vẽ hình ảnh, canvas hoặc video trên canvas. Nó cũng vẽ các phần của một hình ảnh. Bạn cũng có thể sử dụng nó để tăng hoặc giảm kích thước hình ảnh.
Đây là các giá trị tham số của phương thức drawImage () -
| Sr.No | drawImage () Tham số &Mô tả |
|---|---|
| 1 | img Để chỉ định hình ảnh, canvas hoặc video. |
| 2 | sx x phối hợp nơi bắt đầu cắt. Đây là tùy chọn. |
| 3 | sy y phối hợp nơi bắt đầu cắt. Đây là tùy chọn. |
| 4 | chiều rộng Chiều rộng của hình ảnh được cắt bớt. Đây là tùy chọn. |
| 5 | sheight Chiều cao của hình ảnh được cắt bớt. Đây là tùy chọn. |
| 6 | x x tọa độ nơi hình ảnh sẽ được đặt trên canvas |
| 7 | y y phối hợp nơi hình ảnh sẽ được đặt trên canvas |
| 8 | chiều rộng Chiều rộng của hình ảnh để sử dụng. |
| 9 | chiều cao Chiều cao của hình ảnh để sử dụng. |
Ví dụ
Bạn có thể thử chạy đoạn mã sau để tìm hiểu cách vẽ hình ảnh bằng phương thức 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>