บันทึกการศึกษาเกี่ยวกับ Canvas: การใช้งานพื้นฐานผ้าใบ 2D

<canvas> เป็นองค์ประกอบ HTML ที่สามารถวาดได้โดยใช้สคริปต์ (ปกติคือ js)

< canvas > WebKit เปิดตัวครั้งแรกโดย Apple และใช้ใน Dashboard และ Safari ของ Mac OS X

ปัจจุบันเบราว์เซอร์หลักๆ ทั้งหมดรองรับแล้ว (IE9+ เวอร์ชันต่ำกว่าจำเป็นต้องแนะนำ Explorer Canvas เพื่อรองรับ)

องค์ประกอบ <canvas> สร้างแคนวาสขนาดคงที่ซึ่งบริบทการเรนเดอร์ CanvasRenderContext2D สามารถใช้เพื่อวาดและประมวลผลเนื้อหาที่จะแสดง

หากต้องการวาดบนผืนผ้าใบ คุณต้องได้รับบริบทการเรนเดอร์ CanvasRenderContext2D2d ก่อน (นี่หมายถึง 2D ไม่ได้พูดถึง webgl)

 const canvas = document.getElementById('mycanvas'); const ctx = canvas.getContext('2d');ctx.fillStyle = 'สีชมพู';ctx.fillRect(10, 10, 300, 300);

ตัวอย่าง

คุณสามารถระบุสไตล์ของภาพวาดได้โดยการตั้งค่าคุณสมบัติของบริบท

คุณสมบัติทั้งหมดมีดังนี้:

ต้องระบุความกว้างและความสูงของ Canvas โดยใช้ค่าแอตทริบิวต์ width และ height

หากไม่ได้ระบุ ขนาดเริ่มต้นของ Canvas คือ 300×150

ความกว้างและความสูงที่ระบุโดยสไตล์เป็นเพียงขนาดการแสดงผลขององค์ประกอบแคนวาส ไม่ใช่ขนาดของสภาพแวดล้อมการวาดภาพ

 ผ้าใบ {width: 1000px;height: 600px;}<canvas id=mycanvas width=1000 height=600></canvas><canvas id=mycanvas1 width=500 height=300></canvas><canvas id=mycanvas2>< /canvas>...ctx.fillStyle = สีแดง;ctx.fillRect(10, 10, 100, 100);

เหตุใดสไตล์จึงถูกตั้งค่าให้มีขนาดเท่ากันแต่แสดงแตกต่างกันโดยสิ้นเชิง

• ผืนผ้าใบมีสองขนาด ชุดแรกคือขนาดขององค์ประกอบ และอีกชุดคือขนาดของพื้นผิวการวาดภาพ
• หากตั้งค่าผ่านแอตทริบิวต์ความกว้างและความสูง องค์ประกอบและขนาดของพื้นผิวการวาดจะถูกแก้ไขพร้อมกัน
• หากขนาดขององค์ประกอบผืนผ้าใบไม่พอดีกับขนาดของพื้นผิวการวาดภาพ พื้นผิวการวาดจะถูกปรับขนาดให้พอดีกับขนาดขององค์ประกอบนั้นเอง
• ไม่มีข้อกำหนดพิเศษใด ๆ ขอแนะนำให้ใช้ความกว้างและความสูงของผืนผ้าใบโดยตรง

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network