ปัญหาที่พบ: html/11467.html">สาเหตุที่องค์ประกอบ Canvas มีรูปร่างผิดปกติและบิดเบี้ยว
องค์ประกอบ DOM มีสามขนาด: ขนาดลักษณะ, ขนาด html และขนาด css
เมื่อใช้องค์ประกอบ canvas ความกว้างและความสูงเริ่มต้นขององค์ประกอบ canvas คือ 300px * 150px ขนาดเริ่มต้นที่นี่คือขนาด html
เพื่อช่วยให้เข้าใจได้ดีขึ้น ให้วาดภาพเป็นตัวอย่าง อาร์ตบอร์ดคือขนาด CSS หรือขนาดสไตล์ และแคนวาสคือขนาด html
หากเราไม่แสดงขนาด html ขององค์ประกอบ canvas ที่ระบุ แต่ระบุขนาด css ในไฟล์ css ผลลัพธ์ที่ได้คือสับสนมาก
ตัวอย่างเช่น เราวาดวงกลมที่มีรัศมี 50px บนผืนผ้าใบเริ่มต้นที่ 300px * 150px
<html lang=zh><head> <meta charset=UTF-8> <title>ขนาดผ้าใบ</title> <style> #canvas { ความกว้าง: 200px; ความสูง: 200px } </style></head>< body><div> <canvas id=canvas></canvas></div><script> window.onload = function () { const canvas = document.getElementById (ผ้าใบ); const ctx = canvas.getContext(2d); ctx.beginPath(); ctx. strokeStyle = #aaaaaa; closePath(); };</script></body></html>ผลลัพธ์สุดท้ายที่แสดงมีดังนี้:
จะเห็นได้ว่าขนาดของผืนผ้าใบคือ 200 * 200 จริงๆ แต่วงกลมกลับกลายเป็นวงรี และรูปร่างก็ผิดรูปไป ทำไมเป็นเช่นนี้?
จะเกิดอะไรขึ้นถ้าขนาดที่กำหนดโดย css ถูกลบ?
จะเห็นได้ว่ากราฟอยู่ในภาวะปกติในขณะนี้ ขนาดของผืนผ้าใบเป็นค่าเริ่มต้นที่ 300*150
จากการเปรียบเทียบและจินตนาการเราสามารถสรุปได้ดังต่อไปนี้:
เริ่มแรกเราวาดวงกลมบนผืนผ้าใบ 300150 หลังจากวาดเสร็จแล้ว เราต้องการเปลี่ยนขนาดผืนผ้าใบเป็น 200200 ขณะเดียวกันผืนผ้าใบยังคงเป็นผืนผ้าใบเดิมและจะไม่มีการเปลี่ยนแปลง
สิ่งที่ได้ผลคือการยืดผ้าใบ สมมติว่าผืนผ้าใบมีความยืดหยุ่น ผืนผ้าใบก็จะยืดจาก 300150 ถึง 200200 ครึ่งแกนหลักของวงกลมบนผืนผ้าใบจะกลายเป็น 1.33 เท่าของขนาดดั้งเดิม และครึ่งแกนรองจะกลายเป็น 0.68 เท่า ณ จุดนี้ วงกลมจะเป็นวงรีโดยธรรมชาติ
สรุปแล้ว:เมื่อใช้แคนวาสในการวาด เพื่อหลีกเลี่ยงปัญหาที่ไม่จำเป็น คุณต้องจำไว้ว่าต้องตั้งค่าความกว้างและความสูงของขนาด HTML สำหรับองค์ประกอบแคนวาส
สรุปข้างต้นเป็นการวิเคราะห์โดยย่อเกี่ยวกับผลกระทบของขนาด html และขนาด css ขององค์ประกอบ canvas บนองค์ประกอบภาพที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและ บรรณาธิการจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!
หากคุณคิดว่าบทความนี้มีประโยชน์สำหรับคุณ คุณสามารถพิมพ์ซ้ำได้ โปรดระบุแหล่งที่มา ขอขอบคุณ!