แท็กผ้าใบใน HTML ใช้เพื่อวาดกราฟิก ในการวาดกราฟิก คุณต้องใช้สคริปต์ แท็กนี้นำมาใช้ใน HTML5 ผ้าใบทุกผืนมีองค์ประกอบสองอย่างที่อธิบายความสูงและความกว้างของผืนผ้าใบ นั่นคือ ความสูงและความกว้างตามลำดับ
ต่อไปนี้เป็นคุณลักษณะ -
- ความสูง − ความสูงของผืนผ้าใบเป็นพิกเซล
- ความกว้าง − ความกว้างของผืนผ้าใบเป็นพิกเซล
ให้เราดูตัวอย่างการใช้แท็กผ้าใบใน HTML -
ตัวอย่าง
<!DOCTYPE html> <html> <body> <canvas id="newCanvas" width="600" height="350" style="border −2px solid orange;"> </canvas> <script> var c = document.getElementById("newCanvas"); var ctx = c.getContext("2d"); ctx.shadowBlur = 20; ctx.shadowColor = "black"; ctx.fillStyle = "green"; ctx.fillRect(40, 40, 100, 250); ctx.shadowBlur = 30; ctx.shadowColor = "blue"; ctx.fillStyle = "orange"; ctx.fillRect(200, 40, 200, 150); </script> </body> </html>
ผลลัพธ์
ให้เราดูตัวอย่างอื่นในการวาดเส้นโค้งกำลังสองใน HTML5 -
ตัวอย่าง
<!DOCTYPE HTML> <html> <head> <style> #test { width − 100px; height −100px; margin − 0px auto; } </style> <script type> function drawShape() { // get the canvas element using the DOM var canvas = document.getElementById('mycanvas'); // 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'); // Draw shapes ctx.beginPath(); ctx.moveTo(75,25); ctx.quadraticCurveTo(25,25,25,62.5); ctx.quadraticCurveTo(25,100,50,100); ctx.quadraticCurveTo(50,120,30,125); ctx.quadraticCurveTo(60,120,65,100); ctx.quadraticCurveTo(125,100,125,62.5); ctx.quadraticCurveTo(125,25,75,25); ctx.stroke(); } else { alert('You need Safari or Firefox 1.5+ to see this demo.'); } } </script> </head> <body id = "test" onload = "drawShape();"> <canvas id = "mycanvas"></canvas> </body> </html>
ผลลัพธ์