ใช้เมธอด HTML5 drawImage() เพื่อวาดภาพ แคนวาส หรือวิดีโอบนแคนวาส นอกจากนี้ยังดึงส่วนของภาพ คุณยังสามารถใช้เพื่อเพิ่มหรือลดขนาดภาพได้อีกด้วย
นี่คือค่าพารามิเตอร์ของเมธอด drawImage() -
| Sr.No | drawImage() พารามิเตอร์ &คำอธิบาย |
|---|---|
| 1 | img เพื่อระบุรูปภาพ แคนวาส หรือวิดีโอ |
| 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> 