ใช้ HTML <canvas> องค์ประกอบที่จะใช้ในการวาดภาพกราฟิกบนหน้าเว็บ
ภาพด้านซ้ายถูกสร้างขึ้นด้วย <canvas> มันแสดงให้เห็นธาตุทั้งสี่: รูปสี่เหลี่ยมผืนผ้าสีแดงเป็นรูปสี่เหลี่ยมผืนผ้าลาดสี่เหลี่ยมหลากสีและข้อความ MULTICOLOR
HTML คืออะไร Canvas ?
ใช้ HTML <canvas> องค์ประกอบที่จะใช้ในการวาดภาพกราฟิกในการบินผ่านสคริปต์ (usually JavaScript)
<canvas> องค์ประกอบเป็นเพียงภาชนะสำหรับกราฟิก คุณต้องใช้สคริปต์เพื่อจริงวาดกราฟิก
Canvas มีหลายวิธีสำหรับเส้นทางการวาดภาพกล่อง, วงกลม, ข้อความ, และภาพเพิ่ม
องค์ประกอบผ้าใบเป็นส่วนหนึ่งของ HTML5 และช่วยให้การแบบไดนามิกการแสดงผลสคริปต์ของรูปทรง 2D และภาพบิตแมป มันเป็นระดับต่ำรูปแบบขั้นตอนที่ปรับปรุงบิตแมปและไม่ได้มีตัวในกราฟที่เกิดเหตุ
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ <canvas> องค์ประกอบ
| ธาตุ | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
ประวัติศาสตร์
ผ้าใบได้รับการเปิดตัวครั้งแรกโดยแอปเปิ้ลสำหรับการใช้งานภายในองค์ประกอบ X WebKit Mac OS ของตัวเองในการใช้งานที่เปิดเครื่อง 2004 เช่นเครื่องมือแดชบอร์ดและเบราว์เซอร์ซาฟารี
ต่อมาในปี 2005 มันถูกนำมาใช้ในรุ่น 1.8 ของเบราว์เซอร์ตุ๊กแกและ Opera ในปี 2006 และมาตรฐานโดยเว็บ Hypertext การประยุกต์ใช้เทคโนโลยีการทำงานกลุ่ม (WHATWG) ข้อกำหนดที่เสนอใหม่สำหรับเทคโนโลยีเว็บรุ่นต่อไป
การใช้
ผ้าใบประกอบด้วยภูมิภาค drawable กำหนดไว้ในโค้ด HTML ที่มีคุณลักษณะสูงและความกว้าง โค้ด JavaScript อาจเข้าถึงพื้นที่ผ่านชุดเต็มของฟังก์ชั่นการวาดภาพที่คล้ายกับที่ของ API 2D ทั่วไปอื่น ๆ จึงช่วยให้สำหรับกราฟิกที่สร้างแบบไดนามิก
บางคนใช้ที่คาดว่าจะผ้าใบรวมกราฟอาคาร, ภาพเคลื่อนไหว, เกมส์, และองค์ประกอบภาพ
Canvas ตัวอย่าง
canvas เป็นพื้นที่สี่เหลี่ยมบนหน้าเว็บ HTML โดยค่าเริ่มต้น canvas ไม่มีพรมแดนและไม่มีเนื้อหา
มาร์กอัปลักษณะเช่นนี้:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: เสมอระบุแอตทริบิวต์ ID (to be referred to in a script) และกว้างและความสูงแอตทริบิวต์การกำหนดขนาดของ canvas
หากต้องการเพิ่มเส้นขอบให้ใช้ style แอตทริบิวต์:
พื้นฐาน Canvas ตัวอย่าง
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas> ลองตัวเอง» การวาดภาพด้วย JavaScript
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75); ลองตัวเอง» ขีดเส้น
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); ลองตัวเอง» ล้อมกรอบ
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke(); ลองตัวเอง» วาดข้อความ
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50); ลองตัวเอง» โรคหลอดเลือดสมองข้อความ
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50); ลองตัวเอง» วาดลาดเชิงเส้น
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); ลองตัวเอง» วาดวงกลมไล่โทนสี
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); ลองตัวเอง» วาดภาพ
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10); ลองตัวเอง» HTML Canvas กวดวิชา
การเรียนรู้ทั้งหมดเกี่ยวกับ HTML <canvas> , เยี่ยมชมเต็มรูปแบบ HTML ของเรา Canvas กวดวิชา