วาดภาพบนผืนผ้าใบด้วย 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";สถานที่ให้บริการสไตล์การเติมสีอาจเป็นสี CSS, การไล่ระดับสีหรือรูปแบบ สไตล์การเติมสีเริ่มต้นเป็นสีดำ
fillRect( x,y,width,height ) วิธีการวาดรูปสี่เหลี่ยมที่เต็มไปด้วยสไตล์เติมบนผืนผ้าใบ:
ctx.fillRect(0,0,150,75);