ผ้าใบ HTML5
<ผ้าใบ> กราฟิกแท็กกำหนดเองเช่นชาร์ตและภาพอื่น ๆ คุณต้องใช้สคริปต์เพื่อวาดกราฟิก
ในผืนผ้าใบ (Canvas) วาดรูปสี่เหลี่ยมผืนผ้าสีแดงสี่เหลี่ยมลาดสี่เหลี่ยมสีและบางข้อความสี
ผ้าใบคืออะไร?
HTML5 <ผ้าใบ> องค์ประกอบที่จะใช้ในการวาดภาพกราฟิกผ่านสคริปต์ (มักจาวาสคริปต์) ให้เสร็จสมบูรณ์
<ผ้าใบ> แท็กเป็นภาชนะกราฟิกคุณต้องใช้สคริปต์เพื่อวาดภาพกราฟิก
คุณสามารถใช้ Canva วาดเส้นทางกล่องวงกลมตัวอักษรและภาพผ่านการเพิ่มความหลากหลายของวิธี
สนับสนุนเบราว์เซอร์
Internet Explorer 9 +, Firefox, Opera, Chrome, Safari และการสนับสนุน <ผ้าใบ> องค์ประกอบ
หมายเหตุ: Internet Explorer 8 และรุ่นก่อนหน้านี้ของเบราว์เซอร์ IE ไม่สนับสนุน <ผ้าใบ> องค์ประกอบ
สร้างผ้าใบ (Canvas)
หน้าผ้าใบเป็นรูปสี่เหลี่ยมผืนผ้าถูกดึงผ่าน <ผ้าใบ> องค์ประกอบ
หมายเหตุ: โดยค่าเริ่มต้น <ผ้าใบ> องค์ประกอบที่ไม่มีพรมแดนและเนื้อหา
<ผ้าใบ> ตัวอย่างง่ายๆดังต่อไปนี้:
หมายเหตุ: ฉลากมักจะต้องระบุแอตทริบิวต์ ID (สคริปต์ที่มักจะอ้าง) คุณลักษณะขนาดกว้างและความสูงกำหนดผ้าใบ
เคล็ดลับ: คุณสามารถใช้หลาย <ผ้าใบ> องค์ประกอบในหน้าเว็บ HTML
ใช้แอตทริบิวต์สไตล์เพื่อเพิ่มเส้นขอบ:
ตัวอย่าง
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);
</script>
ลอง»
ตัวอย่างของการวิเคราะห์:
ครั้งแรกที่พบว่า <ผ้าใบ> องค์ประกอบ:
หลังจากนั้นสร้างวัตถุบริบท:
getContext ( "2D") เป็นวัตถุในตัว HTML5 วัตถุมีหลายวิธีในการวาดภาพเส้นทางกล่องวงกลมตัวอักษรและการเพิ่มภาพ
ต่อไปนี้สองบรรทัดของรหัสที่จะวาดรูปสี่เหลี่ยมผืนผ้าสีแดง:
ctx.fillRect(0,0,150,75);
การตั้งค่าคุณสมบัติสไตล์การเติมสีอาจเป็นสีของ CSS, การไล่ระดับสีหรือรูปแบบ ตั้งค่าเริ่มต้นสไตล์การเติมสีคือ # 000000 (สีดำ)
FillRect (x, y, ความกว้างความสูง) วิธีการกำหนดรูปสี่เหลี่ยมผืนผ้าที่เต็มไปด้วยวิธีการปัจจุบัน
พิกัดผ้าใบ
ผ้าใบเป็นตารางสองมิติ
ผ้าใบบนพิกัดมุมซ้าย (0,0)
วิธีการดังกล่าวมีพารามิเตอร์ FillRect (0,0,150,75)
ซึ่งหมายความว่า: วาดรูปสี่เหลี่ยมผืนผ้า 150x75 บนผืนผ้าใบจากมุมซ้ายบน (0,0)
ตัวอย่างของพิกัด
ที่แสดงด้านล่างพิกัด X และ Y ของผ้าใบบนผืนผ้าใบสำหรับการวางตำแหน่งภาพวาด การเคลื่อนไหวของรูปสี่เหลี่ยมผืนผ้าเมาส์แสดงพิกัดที่ตั้ง
ผ้าใบ - เส้นทาง
On line ที่มีภาพวาดผ้าใบ, เราจะใช้สองวิธีต่อไป:
- moveTo(x, y) พิกัดกำหนดเส้นตรงจุดเริ่มต้น
- LineTo(X, Y) พิกัดเพื่อกำหนดจุดสิ้นสุดของเส้น
วาดเส้นที่เราจะต้องใช้ "หมึก" วิธีการเช่นโรคหลอดเลือดสมอง ()
ตัวอย่าง
กำหนดเริ่มต้นพิกัด (0,0) และพิกัดจบ (200, 100) และใช้จังหวะ () วิธีการวาดเส้นแล้ว:
จาวาสคริ:
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
ลอง»
วาดวงกลมในผ้าใบเราจะใช้วิธีการต่อไปนี้:
- โค้ง (x, y, R, เริ่มหยุด)
ในความเป็นจริงเราใช้ "หมึก" วิธีการเมื่อวาดวงกลมเช่นโรคหลอดเลือดสมอง () หรือเติม ()
ตัวอย่าง
ARC ใช้ () วิธีการวาดวงกลม:
javascript:
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
ลอง»
ผ้าใบ - ข้อความ
ใช้ผ้าใบวาดข้อความคุณสมบัติที่สำคัญและวิธีการดังต่อไปนี้:
- ตัวอักษร - กำหนดตัวอักษร
- fillText (ข้อความ x, y)- วาดข้อความของแข็งบนผืนผ้าใบ
- strokeText (ข้อความ x, y)- การวาดภาพบนผืนผ้าใบข้อความกลวง
ใช้ fillText ():
ตัวอย่าง
ใช้ "Arial" ตัวอักษรแสดงผลข้อความ 30px สูง (ของแข็ง) บนผืนผ้าใบ:
javascript:
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
ลอง»
strokeText ใช้ ():
ตัวอย่าง
ใช้ "Arial" ตัวอักษรแสดงผลข้อความ 30px สูง (กลวง) บนผ้าใบ:
javascript:
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
ลอง»
ผ้าใบ - ไล่โทนสี
ไล่โทนสีสามารถเติมเต็มในรูปสี่เหลี่ยมวงกลมเส้น, ข้อความ, ฯลฯ รูปทรงต่างๆสามารถกำหนดสีที่แตกต่างกัน
นี่คือสองวิธีที่แตกต่างกันในการตั้งผ้าใบไล่โทนสีคือ:
- createLinearGradient (x, y, X1,Y1) - สร้างการไล่ระดับสีเส้น
- createRadialGradient (x, y, R,X1, Y1, R1) - สร้างรัศมี / รอบช้า
เมื่อเราใช้วัตถุลาดคุณต้องใช้สองหรือสีครบวงจรมากขึ้น
addColorStop () วิธีการระบุสีหยุดใช้พิกัดเพื่ออธิบายพารามิเตอร์ที่สามารถเป็น 0-1
ใช้การตั้งค่าสไตล์การเติมสีหรือ strokeStyle มูลค่าการไล่ระดับสีไล่โทนสีแล้ววาดรูปทรงเช่นสี่เหลี่ยมข้อความหรือบรรทัด
ใช้ createLinearGradient ():
ตัวอย่าง
สร้างลาดเชิงเส้น ใช้รูปสี่เหลี่ยมผืนผ้าสีเติมไล่ระดับ:
javascript:
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);
ลอง»
ใช้ createRadialGradient ():
ตัวอย่าง
สร้างรัศมี / ลาดวงกลม ใช้รูปสี่เหลี่ยมผืนผ้าสีเติมไล่ระดับ:
javascript:
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);
ลอง»
ผ้าใบ - ภาพ
หนึ่งภาพลงบนผืนผ้าใบโดยใช้วิธีการต่อไปนี้:
- drawImage(ภาพ x, y)
ใช้ภาพ:
ตัวอย่าง
ภาพที่ถูกวางไว้บนผืนผ้าใบ:
javascript:
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
ลอง»
คู่มือการใช้งาน HTML ผ้าใบอ้างอิง
สถานที่ให้บริการที่สมบูรณ์แบบของฉลากสามารถดู คู่มืออ้างอิงผ้าใบ
แบบ HTML <ผ้าใบ> Tag
| Tag | 描述 |
|---|---|
| <canvas> | HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 |