Phương thức HTML5 drawImage() dùng để vẽ hình ảnh, canvas hoặc video lên canvas. Nó cũng vẽ một phần của hình ảnh. Bạn cũng có thể dùng nó để phóng to/thu nhỏ hình ảnh.
Các tham số của phương thức drawImage():
| STT | Tham số drawImage() & Mô tả |
|---|---|
| 1 | img Chỉ định hình ảnh, canvas, hoặc video |
| 2 | sx Tọa độ x bắt đầu cắt (tùy chọn) |
| 3 | sy Tọa độ y bắt đầu cắt (tùy chọn) |
| 4 | swidth Chiều rộng vùng cắt (tùy chọn) |
| 5 | sheight Chiều cao vùng cắt (tùy chọn) |
| 6 | x Tọa độ x nơi đặt hình ảnh trên canvas |
| 7 | y Tọa độ y nơi đặt hình ảnh trên canvas |
| 8 | width Chiều rộng hình ảnh sử dụng |
| 9 | height Chiều cao hình ảnh sử dụng |
Ví dụ
Chạy mã sau để học cách vẽ hình ảnh dù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() { var canvas = document.getElementById('newCanvas'); if (canvas.getContext) { 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>