เมื่อเร็วๆ นี้ เนื่องจากความต้องการงาน ฉันจึงได้เรียนรู้เกี่ยวกับแท็ก Canvas ในรูปแบบ Html
Canvas เป็นองค์ประกอบใหม่ของ HTML5 เป็นเหมือนม่านที่สามารถวาดแผนภูมิ ภาพเคลื่อนไหว ฯลฯ ได้โดยใช้ JavaScript
ในยุคก่อน Canvas การวาดภาพสามารถทำได้ด้วยความช่วยเหลือของปลั๊กอิน Flash เท่านั้น และเพจต่างๆ ต้องใช้ JavaScript และ Flash ในการโต้ตอบ ด้วย Canvas เราไม่จำเป็นต้องใช้ Flash อีกต่อไป และสามารถใช้ JavaScript เพื่อวาดภาพได้โดยตรง
ปัญหาเริ่มต้นเมื่อฉันเขียนสวัสดีชาวโลกด้วยตัวเองหลังจากดูบทช่วยสอน ดูรหัสด้านล่าง:
<!DOCTYPE html><html lang=en><body><canvas id=canvas1 style=width: 200px;height: 200px; border:1px solid black;></canvas><script> var oC = document.getElementById( 'canvas1'); var ctx = oC.getContext(2d); ctx.moveTo(0, 0); ctx.lineTo(200, 200); ctx.จังหวะ();</script></body></html>
ความหมายของโค้ดข้างต้นคือการวาดเส้นตรงบนผืนผ้าใบที่มีความกว้างและความสูงเส้นละ 200px จุดเริ่มต้นของเส้นตรงคือ (0,0) และจุดสิ้นสุดคือ (200,200)
อย่างไรก็ตาม ภาพที่เบราว์เซอร์วาดคือ:
ลองดูรูปนี้สิ~ ทำไมมันชันขนาดนี้? ไม่ควร~ มันควรจะเป็นเส้นทแยงมุม~~
ต่อมาหลังจากค้นหาข้อมูลพบว่าเมื่อตั้งค่าความกว้างและความสูงของแท็ก canvas มีวิธีการและผลที่ตามมาดังต่อไปนี้:
ความกว้างเริ่มต้นขององค์ประกอบ Canvas คือ 300px และความสูงคือ 150px คุณสามารถใช้วิธีต่อไปนี้:
วิธีที่หนึ่ง:
1 <ความกว้างของผ้าใบ=500 ความสูง=500$amp;>amp;$lt;/canvas>
วิธีที่ 2: ใช้การดำเนินการ HTML5 Canvas API
1 var canvas = document.getElementById('id ของ canvas ที่จะใช้งาน');
2 ผืนผ้าใบกว้าง = 500;
3 ผืนผ้าใบกว้าง = 500;
หากตั้งค่าความกว้างและความสูงด้วยวิธีการต่อไปนี้ องค์ประกอบ Canvas จะถูกขยายจากขนาดดั้งเดิมเป็นความกว้างและความสูงที่ตั้งไว้:
วิธีที่ 1: การใช้ CSS จะขยายไฟล์
1 #เพื่อใช้งาน canvas id{
2 ความกว้าง:1000px;
3 ความสูง: 1,000px;
4 ｝
รวมถึง style= ในรูปแบบอินไลน์ด้วย นั่นคือในตัวอย่างข้างต้น การยืดจะเกิดขึ้นด้วย
วิธีที่ 2: การดำเนินการโดยใช้ HTML5 Canvas API จะถูกขยายออกไป
1 var canvas = document.getElementById('id ของ canvas ที่จะใช้งาน');
2 canvas.style.width = 1,000px;
3 canvas.style.height = 1,000px;
วิธีที่ 3: การใช้ $(#id).width(500); ของ jquery จะถูกขยายออก
อื่นๆ:ขนาดความกว้างและความสูงของผืนผ้าใบไม่สามารถแสดงเป็นเปอร์เซ็นต์ได้ canvas จะแสดงเปอร์เซ็นต์เป็นค่าตัวเลข
ดังนั้นจากข้อมูลข้างต้น เราจึงทราบได้ว่าสาเหตุก็คือโค้ดในตัวอย่างด้านบนจะขยายความกว้างและความสูงของผืนผ้าใบ ทำให้ภาพไม่สอดคล้องกับความคาดหวัง
ตอนนี้ฉันได้เขียนตัวอย่างโค้ดใหม่เพื่อตั้งค่าความกว้างและความสูงของผืนผ้าใบอย่างถูกต้อง:
<!DOCTYPE HTML><html><body><canvas id=myCanvas width=200 height=200 style=border:1px solid black;> เบราว์เซอร์ของคุณไม่รองรับองค์ประกอบ canvas</canvas><script type=text/ จาวาสคริปต์> var c = document.getElementById(myCanvas); var cxt = c.getContext(2d); cxt.lineTo(200, 200); cxt. stroke();</script></body></html>
ผลลัพธ์:
เสร็จ.
สรุปข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่าเนื้อหาของบทความนี้จะมีคุณค่าอ้างอิงสำหรับการศึกษาหรือการทำงานของทุกคน หากคุณมีคำถามใด ๆ คุณสามารถฝากข้อความไว้เพื่อการสื่อสารได้ เครือข่าย.