Canvas HTML5

อิเล็กทรอนิกส์ canvas ใช้ในการวาดกราฟิกบนหน้าเว็บ:

มันคือ Canvas อะไร?:

อิเล็กทรอนิกส์ canvas ของ HTML5 ใช้ JavaScript วาดภาพบนหน้าเว็บ:

กระดานวาดเป็นพื้นที่สี่เหลี่ยมผืนผ้า คุณสามารถควบคุมทุกพิกเซล:

Canvas มีวิธีวาดทางทางแบบเส้นทางหลายรูปแบบ สี่เหลี่ยมผืนผ้า รูปวงกลม ตัวอักษร และเพิ่มรูปภาพ:

สร้างอิเล็กทรอนิกส์ Canvas:

เพิ่มอิเล็กทรอนิกส์ canvas ไปยังหน้า HTML5:

กำหนด id ของอิเล็กทรอนิกส์ และความกว้างความสูง:

<canvas id="myCanvas" width="200" height="100"></canvas>:

วาดด้วย JavaScript:

อิเล็กทรอนิกส์ canvas ไม่มีความสามารถวาดภาพ: งานวาดทั้งหมดต้องทำใน JavaScript ภายใน:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript ใช้ id หาอิเล็กทรอนิกส์ canvas:

var c=document.getElementById("myCanvas");

หลังจากนั้น สร้างวิธี context ต่อ:

var cxt=c.getContext("2d");

วิธี getContext("2d") คือสิ่งที่มีอยู่ในต้นแบบของ HTML5 ซึ่งมีวิธีที่ใช้วาดเส้นทาง、สี่เหลี่ยมผืนผึ้ง、วงกลม、ตัวอักษรและเพิ่มรูปภาพ:

รวมถึงสองบรรทัดรหัสด้านล่างนี้ วาดสี่เหลี่ยมผืนผึ้งสีแดง:

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

วิธี fillStyle ทำให้สีแก้วสีแดง และวิธี fillRect กำหนดรูปร่าง、ตำแหน่งและขนาด:

เข้าใจตำแหน่ง

วิธี fillRect ของด้านบนมีตัวเลข (0,0,150,75):

หมายความว่า วาดสี่เหลี่ยมผืนผึ้งขนาด 150x75 จากด้านบนซ้าย (0,0):

เช่นเดียวกับที่เห็นในภาพด้านล่างนี้ ตำแหน่ง X และ Y ของกระดาษวาดใช้เพื่อจัดตำแหน่งวาดบนกระดาษวาด:

Canvas ตัวอย่าง: ความเข้าใจเชิงตำแหน่ง

ตัวอย่าง: ขณะเคลื่อนที่เมาส์เหนือสี่เหลี่ยมผืนผึ้งจะแสดงความเป็นตัวตนของตำแหน่ง

ตัวอย่างเพิ่มเติม Canvas

ตัวอย่างเพิ่มเติมของการวาดบนสิ่งที่มีรูปแบบ canvas:

ตัวอย่าง - สาย

วาดสายด้วยการกำหนดจุดเริ่มต้นและจุดสิ้นสุด:

Canvas ตัวอย่าง: สาย

รหัสที่ใช้งาน JavaScript:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>

ตัวแทน canvas:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
เว็บเบราวเซอร์ของคุณไม่สนับสนุนตัวแทน canvas
</canvas>

ทดลองเลย

ตัวอย่าง - วงกลม

วาดวงกลมด้วยการกำหนดขนาด、สีและตำแหน่ง:

Canvas ตัวอย่าง: รูปวงกลม

รหัสที่ใช้งาน JavaScript:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>

ตัวแทน canvas:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
เว็บเบราวเซอร์ของคุณไม่สนับสนุนตัวแทน canvas
</canvas>

ทดลองเลย

ตัวอย่าง - สีเปลี่ยนแปลง

ใช้สีที่คุณกำหนดเพื่อวาดภาพพื้นหลังที่เปลี่ยนแปลงสี:

Canvas ตัวอย่าง: กราดฉาก

รหัสที่ใช้งาน JavaScript:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>

ตัวแทน canvas:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
เว็บเบราวเซอร์ของคุณไม่สนับสนุนตัวแทน canvas
</canvas>

ทดลองเลย

ตัวอย่าง - ภาพ

นำภาพเข้ามาบนคาวน์ส์:

Canvas ตัวอย่าง: รูปภาพ

รหัสที่ใช้งาน JavaScript:

<script>
window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("scream");
   ctx.drawImage(img, 10, 10);
};
</script>

ตัวแทน canvas:

<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;">
เว็บเบราวเซอร์ของคุณไม่สนับสนุนแท็ก HTML5 canvas
</canvas>

ทดลองเลย

ตู้เทคโนโลยี HTML Canvas

หากต้องการเรียนรู้เกี่ยวกับการใช้งานคาวน์ส์เพิ่มเติม โปรดเข้าเว็บไซต์ของเรา ตู้เทคโนโลยี HTML Canvas.

หน้าที่เกี่ยวข้อง

คู่มืออ้างอิง:แท็ก <canvas> ของ HTML5

คู่มืออ้างอิง:ตัวแทน Canvas ของ HTML DOM