HTML Canvas Drawing
วาดบนผ้าใบด้วย JavaScript
การวาดภาพทั้งหมดบนผ้าใบ HTML ต้องใช้ JavaScript:
ตัวอย่าง
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
ขั้นตอนที่ 1: ค้นหาองค์ประกอบผ้าใบ
ก่อนอื่น คุณต้องหาองค์ประกอบ <canvas>
ทำได้โดยใช้เมธอด HTML DOM getElementById():
var canvas = document.getElementById("myCanvas");
ขั้นตอนที่ 2: สร้างวัตถุรูปวาด
ประการที่สอง คุณต้องมีวัตถุรูปวาดสำหรับผืนผ้าใบ
getContext() เป็นออบเจ็กต์ HTML ในตัวพร้อมคุณสมบัติและวิธีการวาด:
var ctx = canvas.getContext("2d");
ขั้นตอนที่ 3: วาดบนผ้าใบ
สุดท้าย คุณสามารถวาดบนผืนผ้าใบได้
ตั้งค่ารูปแบบการเติมของวัตถุรูปวาดเป็นสีแดง:
ctx.fillStyle = "#FF0000";
คุณสมบัติ fillStyle สามารถเป็นสี CSS การไล่ระดับสีหรือรูปแบบ fillStyle เริ่มต้นเป็นสีดำ
เมธอด fillRect( x,y,width,height ) วาดรูปสี่เหลี่ยมผืนผ้าที่เต็มไปด้วยสไตล์การเติมบนผืนผ้าใบ:
ctx.fillRect(0, 0, 150, 75);