เมื่อเร็วๆ นี้ ฉันพบปัญหาเล็กๆ น้อยๆ เมื่อเรียนรู้คุณสมบัติของ Canvas ซึ่งก็คือความกว้างและความสูงของ Canvas ในที่สุดฉันก็แก้ไขมันได้ด้วยการค้นหาข้อมูลที่เกี่ยวข้อง ดังนั้นฉันจะแบ่งปันขั้นตอนการแก้ปัญหากับทุกคนด้านล่าง ฉันจะไม่พูดอะไรมาก มาดูรายละเอียดกันดีกว่า
คุณสมบัติความกว้างความสูงผ้าใบ1. เมื่อใช้แอตทริบิวต์ width height จอแสดงผลจะไม่ยืดออกตามปกติดังนี้:
<canvas id=mycanvas width=300 height=300>เบราว์เซอร์ไม่รองรับ Canvas โปรดอัปเกรดหรือใช้เบราว์เซอร์อื่น! </canvas><script type=text/javascript> var canvas = document.getElementById(mycanvas), ctx = canvas.getContext('2d'); ctx.moveTo(0,0); ctx.lineTo(300,150); .จังหวะ();</script>เอฟเฟกต์การวิ่งมีดังนี้ซึ่งเป็นเส้นทแยงมุม
2.เมื่อใช้รูปแบบภาพจะยืด(ผิดรูป)
<สไตล์> #mycanvas { ความกว้าง: 150px; ความสูง: 150px; } </style>ผลการดำเนินงาน
จะเข้าใจได้อย่างไร? - - มันสามารถเข้าใจได้ด้วยวิธีนี้--Canvas คือกระดานวาดภาพและกระดาษวาดรูป กระดานวาดภาพเทียบเท่ากับภาชนะ
ความกว้างและความสูงเริ่มต้นของกระดานวาดภาพและกระดาษวาดรูปคือ 300*150 เมื่อความกว้างและความสูงของกระดาษวาดภาพและกระดานวาดภาพเท่ากัน รูปภาพจะไม่ถูกยืดออก เมื่อความกว้างและความสูงของกระดาษวาดภาพและ กระดานวาดภาพจะแตกต่างกันภาพจะยืดออก (ผิดรูป)
1. คุณลักษณะความกว้างและความสูงใช้สำหรับกำหนดความกว้างและความสูงของกระดานวาดภาพและกระดาษวาดรูป
ตัวอย่างเช่น: width=300 height=300 หมายความว่าความกว้างและความสูงของกระดานวาดภาพคือ 300*300 และความกว้างและความสูงของกระดาษวาดภาพก็เท่ากับ 300*300 เช่นกัน รูปภาพในแนวทแยง 300*300 จะไม่เป็นเช่นนั้น ยืดออก
2. กำหนดความกว้างและความสูงของกระดานวาดภาพเท่านั้น ความกว้างและความสูงของกระดาษวาดภาพยังคงเป็นค่าเริ่มต้นที่ 300*150
(ใช้ภาพด้านบนเป็นตัวอย่าง) ดังนั้น ภาพแนวทแยงขนาด 300*300 ที่คุณกำลังทำงานอยู่เพียงบางส่วนเท่านั้นจึงจะถูกวาดบนกระดาษวาดภาพ ดังนี้:
อย่างไรก็ตาม กระดาษวาดภาพจะไม่ทำให้กระดานวาดภาพว่างเปล่า ดังนั้นกระดาษวาดภาพและรูปภาพจะต้องยืดให้มีขนาดเท่ากับกระดานวาดภาพ ในตัวอย่างนี้ ความกว้างของกระดาษวาดรูปและความกว้างของอาร์ตบอร์ดคือ 30 และความสูงคือครึ่งหนึ่งของอาร์ตบอร์ด ดังนั้นคุณเพียงแค่ต้องยืดความสูงออกไปสองครั้ง ดังนั้นรูปภาพจึงถูกยืดและทำให้บางลงด้วย ทิศทาง X ยังคงไม่เปลี่ยนแปลง และทิศทาง Y จะเพิ่มเป็นสองเท่า ดังนั้นเราจึงได้ภาพที่ผิดรูป
สรุปเกี่ยวกับการตั้งค่าความกว้างและความสูงของ Canvas ใน HTML5
องค์ประกอบ Canvas มีความกว้าง 300px และสูง 150px โดยค่าเริ่มต้น หากต้องการตั้งค่าความกว้างและความสูง คุณสามารถใช้วิธีต่อไปนี้ (จะไม่ถูกขยาย):
วิธีที่หนึ่ง:
<ความกว้างของผ้าใบ=500 ความสูง=500></ผ้าใบ>
วิธีที่ 2: ใช้ HTML5 Canvas API เพื่อดำเนินการตกลง
var canvas = document.getElementById('id ของ canvas ที่คุณต้องการใช้งาน');
ผ้าใบความกว้าง = 500;
ผ้าใบความกว้าง = 500;
หากตั้งค่าความกว้างและความสูงด้วยวิธีการต่อไปนี้ องค์ประกอบ Canvas จะถูกขยายจากขนาดดั้งเดิมเป็นความกว้างและความสูงที่ตั้งไว้:
วิธีที่ 1: การใช้ CSS จะขยายไฟล์
#เพื่อดำเนินการรหัสของผืนผ้าใบ{
ความกว้าง:1000px;
ความสูง:1000px;
-
วิธีที่ 2: การดำเนินการโดยใช้ HTML5 Canvas API จะถูกขยายออกไป
var canvas = document.getElementById('id ของ canvas ที่คุณต้องการใช้งาน');
ผ้าใบ style.width = 1,000px;
ผ้าใบ style.height = 1,000px;
วิธีที่ 3: การใช้ $(#id).width(500); ของ jquery จะถูกขยายออก
อื่นๆ:ขนาดความกว้างและความสูงของผืนผ้าใบไม่สามารถแสดงเป็นเปอร์เซ็นต์ได้ canvas จะแสดงเปอร์เซ็นต์เป็นค่าตัวเลข
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่าเนื้อหาของบทความนี้จะมีคุณค่าอ้างอิงสำหรับการศึกษาหรือการทำงานของทุกคน หากคุณมีคำถามใด ๆ คุณสามารถฝากข้อความไว้เพื่อการสื่อสารได้ เครือข่าย.