แท็ก HTML <canvas> แทร็ก

  • หน้าก่อนหน้า <button>
  • หน้าต่อไป <caption>

การกำหนดและการใช้งาน

<canvas> แทร็กเกอร์มักจะวาดกราฟิกทันทีด้วยสคริปต์ (ส่วนใหญ่เป็น JavaScript)

<canvas> แทร็กเกอร์เป็นสิ่งที่โปร่งใส มันเป็นแค่ตัวจัดเก็บกราฟิก ต้องใช้สคริปต์เพื่อวาดกราฟิกจริง

ในเบราเซอร์ที่ปิด JavaScript และไม่สนับสนุน <canvas> ในเบราเซอร์ <canvas> ข้อความในองค์ประกอบ

คำแนะนำ

เรามีคำแนะนำเกี่ยวกับ <canvas> ขององค์ประกอบนี้

สำหรับดูคุณสมบัติและวิธีการทั้งหมด โปรดเข้าถึง คู่มืออ้างอิง HTML Canvas.

ตัวอย่าง

ตัวอย่าง 1

วาดสี่เหลี่ยมผืนผ้าสีแดงและแสดงมันในองค์ประกอบ <canvas> ตามไปนี้

<canvas id="myCanvas">
เบราเซอร์ของคุณไม่สนับสนุนแบตทิ้ง canvas
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

ลองทดลองด้วยตัวเอง

ตัวอย่าง 2

ตัวอย่าง <canvas> อีกตัว

<canvas id="myCanvas">
เบราเซอร์ของคุณไม่สนับสนุนแบตทิ้ง canvas
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// เปิดความโปร่งใส
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

ลองทดลองด้วยตัวเอง

คุณสมบัติ

คุณสมบัติ ค่า คำอธิบาย
height ค่าพิกเซล กำหนดความสูงของกระดานวาด ค่าเริ่มต้นคือ 150
width ค่าพิกเซล กำหนดความกว้างของกระดานวาด ค่าเริ่มต้นคือ 300

คุณสมบัติโลก

<canvas> แบตทิ้งยังสนับสนุน คุณสมบัติโลกใน HTML.

คุณสมบัติเหตุการณ์

<canvas> แบตทิ้งยังสนับสนุน คุณสมบัติเหตุการณ์ใน HTML.

การตั้งค่า CSS โดยเริ่มต้น

ส่วนใหญ่ของเบราเซอร์จะแสดงค่าเริ่มต้นดังนี้ <canvas> องค์ประกอบ:

canvas {
  height: 150px;
  width: 300px;
}

ลองทดลองด้วยตัวเอง

ประวัติของ <canvas>

นี้เป็นองค์ประกอบ HTML ที่ถูกออกแบบเพื่อกราฟิกเวกเตอร์ที่ผู้ใช้งานส่วนบุคคล มันไม่มีพฤติกรรมของตัวเอง แต่มันแสดงให้ JavaScript ของผู้ใช้งานเข้าถึง API การวาดเพื่อให้สคริปต์สามารถวาดสิ่งที่ต้องการวาดได้บนกระดานวาดเดียว

สัญญาณ <canvas> ถูกนำเสนอโดย Apple ใน Web บราวเซอร์ Safari 1.3. สาเหตุที่ทำให้ Apple ขยายภาษา HTML นี้เนื่องจากความสามารถการวาดของ HTML ใน Safari ถูกใช้โดยส่วนที่เรียกว่า Dashboard ของ Mac OS X และ Apple ต้องการที่จะมีวิธีที่สนับสนุนกราฟิกที่มีสคริปต์ใน Dashboard

Firefox 1.5 และ Opera 9 ตามหลัง Safari. ทั้งสองเว็บเบราเซอร์นี้สนับสนุนสัญญาณ <canvas>

เราแม้แต่จะสามารถใช้สัญญาณ <canvas> ใน IE และสร้างความสามารถเดียวกันกับ VML ใน IE ด้วยรหัสที่เปิดที่สร้างด้วย JavaScript (ที่มีการเริ่มต้นโดย Google) ดูข้อมูลเพิ่มเติม:http://excanvas.sourceforge.net/.

ความพยายามที่จะทำให้ <canvas> มีมาตรฐานถูกขับเคลื่อนโดยสมาคมองค์ประกอบแห่งอุตสาหกรรม Web แบบไม่เป็นทางการ ของผู้ผลิตเว็บเบราเซอร์ โดยตอนนี้ <canvas> ได้กลายเป็นสัญญาณที่เป็นทางการในบันทึก HTML 5 ดูข้อมูลเพิ่มเติม:http://www.whatwg.org/specs/web-apps/current-work/

ความแตกต่างระหว่างสัญญาณ <canvas> และ SVG และ VML

หนึ่งในความแตกต่างสำคัญระหว่างสัญญาณ <canvas> และ SVG และ VML คือ <canvas> มี API การวาดที่ฐาน JavaScript ในขณะที่ SVG และ VML ใช้ XML ไฟล์เพื่อเอาเองเป็นตัวอธิบายการวาด

สองวิธีนี้เท่าเทียมกันในด้านฟังก์ชัน และสามารถใช้วิธีหนึ่งแทนวิธีอื่นได้. ดูเหมือนว่าพวกเขาไม่เหมือนกันมาก แต่แต่ละวิธีมีข้อย่อมและข้ออ่อน. ตัวอย่างเช่น การวาด SVG ง่ายที่จะแก้ไข โดยเพียงแค่ลบออกส่วนที่ต้องการจากการเรียกใช้

เพื่อลบออกส่วนที่ต้องการจากภาพที่เดียวกันของสัญญาณ <canvas> มักจะต้องลบการวาดและวาดมันขึ้นมาใหม่

แนวทางในการใช้สัญญาณ <canvas> สำหรับการวาด

ส่วนใหญ่ของ API Canvas การวาดไม่ได้ถูกกำหนดบนตัว <canvas> และรวมถึงการกำหนดบนตัวที่ผ่านเข้ามาด้วย เมธอด getContext()ที่ได้รับมาคือ 'สภาพแวดล้อมการวาด' ตัว

Canvas API ยังใช้รูปแบบการแสดงทางเดิน. แต่, ทางเดินถูกกำหนดโดยชุดของการเรียกใช้เมธอด ไม่ใช่ด้วยรูปแบบของตัวอักษรและตัวเลข อย่างเช่นการเรียกใช้เมธอด beginPath() และ arc().

หลังจากกำหนดเส้นทาง วิธีอื่นๆ เช่น fill() จะทำการปฏิบัติต่อเส้นทางนี้ คุณสมบัติต่างๆ ของสภาพแวดล้อมการวาด อย่างเช่น fillStyle ชี้แจงว่าการปฏิบัติเหล่านี้จะถูกใช้งานอย่างไร

หมายเหตุ：หนึ่งในสาเหตุที่ Canvas API มีขนาดเล็กมากคือมันไม่มีการสนับสนุนการวาดข้อความ ในการเพิ่มข้อความเข้าสู่กราฟิก <canvas> ต้องวาดมันด้วยตัวเองแล้วทำการผสมภาพบิตแมップ หรือใช้ CSS การจัดตำแหน่งที่ตรงข้าม <canvas> ที่จะปิดกั้นข้อความ HTML

การสนับสนุนโปรแกรมบราวเซอร์

ตัวเลขในตารางบอกว่าเวอร์ชั่นบราวเซอร์แรกที่สนับสนุนองค์ประกอบนี้

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0
  • หน้าก่อนหน้า <button>
  • หน้าต่อไป <caption>