การเขียนโปรแกรม HTML5 Canvas API

<script type = "text/javascript">

พยายาม

-

document.createElement ("Canvas"). getContext ("2d");

document.getElementById ("สนับสนุน"). innerhtml = "ตกลง";

-

จับ (e)

-

document.getElementById ("สนับสนุน"). innerhtml = e.message;

-

</script>

เข้าร่วมผ้าใบ

<Canvas ID = สไตล์เส้นทแยงมุม = เส้นขอบ: 1px Solid Blue; ความกว้าง = 200 ความสูง = 200/>

// รับองค์ประกอบ Canvas และบริบทการวาดของมัน var canvas = document.getElementById ("เส้นทแยงมุม");

var context = canvas.getContext ("2d");

// สร้างเส้นทางที่มีพิกัดสัมบูรณ์

Context.BeginPath ();

Context.moveto (70, 140);

Context.lineto (140, 70);

// วาดบรรทัดนี้บนผืนผ้าใบ

Context.stroke ();

เปลี่ยนรูป

เอฟเฟกต์เดียวกับข้างต้นสามารถทำได้ผ่านการเปลี่ยนแปลง (การปรับขนาดการแปลการหมุน) ฯลฯ

วาดเส้นทแยงมุมโดยการเปลี่ยนแปลง

// รับองค์ประกอบ Canvas และบริบทการวาด

var canvas = document.getElementById ("เส้นทแยงมุม");

var context = canvas.getContext ("2d");

// บันทึกสถานะการวาดปัจจุบัน

บริบท save ();

// ย้ายบริบทการวาดไปทางขวาล่าง

บริบทการแปล (70, 140);

// วาดส่วนบรรทัดเดียวกันกับส่วนก่อนหน้าด้วยต้นกำเนิดเป็นจุดเริ่มต้น

Context.BeginPath ();

Context.moveto (0, 0);

Context.lineto (70, -70);

context.stroke (); </p> <p> context.restore ();

เส้นทาง

เส้นทางใน HTML5 Canvas API แสดงถึงรูปร่างใด ๆ ที่คุณต้องการแสดง

เริ่มต้น (): ไม่ว่าคุณจะเริ่มกราฟประเภทใดสิ่งแรกที่คุณต้องโทรคือเริ่มต้น ฟังก์ชั่นง่าย ๆ นี้ไม่มีพารามิเตอร์และใช้เพื่อแจ้งผ้าใบว่ากำลังจะเริ่มวาดกราฟใหม่

Moveto (x, y): ไม่มีการวาดรูปย้ายตำแหน่งปัจจุบันไปยังพิกัดเป้าหมายใหม่ (x, y)

Lineto (x, y): ไม่เพียง แต่ย้ายตำแหน่งปัจจุบันไปยังพิกัดเป้าหมายใหม่ (x, y) แต่ยังวาดเส้นตรงระหว่างพิกัดทั้งสอง

ClosePath (): ฟังก์ชั่นนี้ทำงานได้อย่างมากเหมือน lineto ความแตกต่างเพียงอย่างเดียวคือ ClosePath จะใช้พิกัดเริ่มต้นของเส้นทางโดยอัตโนมัติเป็นพิกัดเป้าหมาย นอกจากนี้ยังแจ้งผ้าใบว่ารูปที่วาดในปัจจุบันถูกปิดหรือได้ก่อตัวเป็นพื้นที่ที่ปิดล้อมอย่างสมบูรณ์ซึ่งมีประโยชน์มากสำหรับการเติมและจังหวะในอนาคต

วาดหลังคาต้นสน

ฟังก์ชั่น createCanopypath (บริบท) {

// วาดต้นไม้ต้นไม้

Context.beginpath (); </p> <p> context.moveto (-25, -50);

context.lineto (-10, -80);

Context.lineto (-20, -80);

context.lineto (-5, -110);

context.lineto (-15, -110); </p> <p> // จุดยอดของต้นไม้

context.lineto (0, -140); </p> <p> context.lineto (15, -110);

Context.lineto (5, -110);

Context.lineto (20, -80);

Context.lineto (10, -80);

Context.lineto (25, -50);

// เชื่อมต่อจุดเริ่มต้นและปิดเส้นทาง

บริบท closepath ();

} </p> <p> ฟังก์ชั่น drawtrails () {

var canvas = document.getElementById ('เส้นทแยงมุม');

var context = canvas.getContext ('2d'); </p> <p> context.save ();

บริบทการแปล (130, 250); </p> <p> // สร้างเส้นทางที่แสดงออกถึงหลังคา

createCanopypath (บริบท); </p> <p> // วาดเส้นทางปัจจุบัน

Context.stroke ();

บริบท restore ();

} </p> <p> window.addeventListener ("โหลด", drawtrails, true);

สไตล์จังหวะ

โหมดโรคหลอดเลือดสมองช่วยให้หลังคาดูสมจริงยิ่งขึ้น

// กว้างเส้น

Context.lineWidth = 4;

// จุดเชื่อมต่อของเส้นทางที่ราบรื่น

context.lineJoin = 'Round';

//สี

Context.strokestyle = '#663300';

// วาดเส้นทางปัจจุบัน

Context.stroke ();

เติมสไตล์

Context.FillStyle = #339900; Context.fill (); วาดรูปสี่เหลี่ยมผืนผ้า

เราเพิ่มลำต้นลงในต้นไม้

Context.FillStyle = '#663300'; Context.fillrect (-5, -50, 10, 50); วาดเส้นโค้ง

บริบท save ();

บริบทการแปล (-10, 350);

context.beginpath (); </p> <p> // เส้นโค้งแรกโค้งไปทางขวาบนขวา

Context.moveto (0, 0);

context.quadraticcurveto (170, -50, 260, -190); </p> <p> // โค้งไปทางขวาล่างขวาล่าง

context.quadraticcurveto (310, -250, 410, -250); </p> <p> // วาดเส้นทางในจังหวะสีน้ำตาลกว้าง

Context.strokestyle = '#663300';

Context.lineWidth = 20;

context.stroke (); </p> <p> // คืนค่าสถานะผ้าใบก่อนหน้า

บริบท restore ();

แทรกภาพในผืนผ้าใบ

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

// โหลดรูปภาพ

var bark = image ใหม่ ();

bark.src = "bark.jpg"; </p> <p> // หลังจากโหลดรูปภาพแล้วโทรหาฟังก์ชั่นการวาดภาพ

bark.onload = function () {

drawtrails ();

-

แสดงภาพ:

// เติมด้วยรูปแบบพื้นหลังเป็นบริบทพื้นหลัง DRAWIMAGE (BARK, -5, -50, 10, 50); การไล่ระดับสี

การใช้การไล่ระดับสีต้องใช้สามขั้นตอน:

(1) สร้างวัตถุไล่ระดับสี

(2) ตั้งค่าสีสำหรับวัตถุไล่ระดับสีและระบุวิธีการเปลี่ยนแปลง

(3) ตั้งค่าการไล่ระดับสีสำหรับสไตล์การเติมหรือสไตล์จังหวะในบริบท

// สร้างการไล่ระดับสีแนวนอนลำดับที่สามที่ใช้เป็นพื้นผิวลำตัว

var trunkgradient = context.createlineargradient (-5, -50, 5, -50); </p> <p> // ขอบซ้ายของลำตัวมีสีน้ำตาลเฉลี่ย

trunkgradient.addcolorstop (0, '#663300'); </p> <p> // มีสีบางอย่างที่จะพูดคุยเกี่ยวกับอยู่ตรงกลางด้านซ้ายของลำต้นต้นไม้

trunkgradient.addcolorstop (0.4, '#996600'); </p> <p> // สีของขอบด้านขวาควรเข้มขึ้น

trunkgradient.addcolorstop (1, '#552200'); </p> <p> // เติมลำตัวด้วยการไล่ระดับสี

Context.fillstyle = trunkgradient;

Context.fillrect (-5, -50, 10, 50);

// สร้างการไล่ระดับสีแนวตั้งเพื่อฉายหลังคาบนลำตัว

var canopyshadow = context.createLineargradient (0, -50, 0, 0);

// จุดเริ่มต้นของการไล่ระดับสีเป็นสีดำที่มีความโปร่งใส 50%

CANOPYSHADOW.ADDCOLORSTOP (0, 'RGBA (0, 0, 0, 0.5)');

// ทิศทางลดลงในแนวตั้งและการไล่ระดับสีค่อยๆเปลี่ยนเป็นความโปร่งใสอย่างสมบูรณ์ภายในระยะสั้นมากนอกความยาวนี้

// ไม่มีการฉายภาพบนลำต้นของต้นไม้

Canopyshadow.addColorStop (0.2, 'RGBA (0, 0, 0, 0.0)'); </p> <p> // เติมในการไล่ระดับสีบนลำตัว

Context.fillstyle = CanopyShadow;

Context.fillrect (-5, -50, 10, 50);

ภาพพื้นหลัง

// โหลดรูปภาพ

var gravel = ภาพใหม่ ();

gravel.src = "gravel.jpg";

gravel.onload = function () {

drawtrails ();

} </p> <p> // แทนที่เส้นหนาสีน้ำตาลด้วยภาพพื้นหลัง

Context.strokestyle = context.createPattern (กรวด, 'ทำซ้ำ');

Context.lineWidth = 20;

Context.stroke ();

พารามิเตอร์ที่สองของบริบทการสร้างรายได้คือเครื่องหมายที่ทำซ้ำได้และสามารถเลือกค่าที่เหมาะสมในตารางที่ 2-1

วิธีการปูกระเบื้อง	ความสำคัญ
ทำซ้ำ	(ค่าเริ่มต้น) รูปภาพจะถูกกระเบื้องในสองทิศทาง
ซ้ำ -x	กระเบื้องแบนแนวนอน
ทำซ้ำ -y	ปูกระเบื้องแบนแนวตั้ง
ไม่ทำซ้ำ	รูปภาพจะปรากฏขึ้นเพียงครั้งเดียวเท่านั้นไม่กระเบื้อง

ซูม

บริบทฟังก์ชั่นการปรับขนาด SCALE (X, Y): X, Y แสดงค่าในสองมิติของ X และ Y ตามลำดับ เมื่อพารามิเตอร์แต่ละตัวแสดงภาพมันจะส่งผ่านไปยังปริมาณของภาพที่จะขยาย (หรือลดลง) บนแกนของทิศทางนี้ หากค่า x คือ 2 หมายความว่าองค์ประกอบทั้งหมดในภาพวาดจะกว้างขึ้นเป็นสองเท่า หากค่า y คือ 0.5 ภาพวาดจะกลายเป็นครึ่งหนึ่งของความสูง

// วาดต้นไม้แรกที่ x = 130, y = 250

บริบท save ();

บริบทการแปล (130, 250);

drawtree (บริบท);

context.restore (); </p> <p> // วาดต้นไม้ที่สองที่ x = 260, y = 500

บริบท save ();

บริบทการแปล (260, 500); </p> <p> // ซูมในความสูงและความกว้างของต้นไม้ที่สองเป็นสองเท่าของต้นฉบับ

Context.scale (2, 2);

drawtree (บริบท);

บริบท restore ();

หมุน

หมุนภาพ

บริบท save ();

// พารามิเตอร์มุมการหมุนอยู่ในเรเดียนเป็นหน่วย

บริบทการค้าขาย (1.57);

Context.DrawImage (MyImage, 0, 0, 100, 100); </p> <p> context.restore ();

วิธีการใช้การแปลง

// บันทึกสถานะปัจจุบัน

context.save (); </p> <p> // ค่า x เพิ่มขึ้นเมื่อค่า y เพิ่มขึ้น ด้วยความช่วยเหลือของการเปลี่ยนแปลงแรงดึง

// สามารถสร้างต้นไม้ที่เอียงที่ใช้เป็นเงา

// หลังจากการแปลงถูกนำไปใช้พิกัดทั้งหมดจะคูณด้วยเมทริกซ์

Context.transform (1, 0,

-0.5, 1,

, 0); </p> <p> // ในทิศทางแกน y เปลี่ยนความสูงเงาเป็น 60%

Context.scale (1, 0.6); </p> <p> // เติมลำตัวด้วยความโปร่งใสสีดำ 20%

Context.fillstyle = 'rgba (0, 0, 0, 0.2)';

context.fillrect (-5, -50, 10, 50); </p> <p> // ทาสีต้นไม้ด้วยเอฟเฟกต์เงาที่มีอยู่เดิม

CreateCanopypath (บริบท);

context.fill (); </p> <p> // คืนค่าสถานะผ้าใบก่อนหน้า

บริบท restore ();

ข้อความ

context.filltext (ข้อความ, x, y, maxWidth): เนื้อหาข้อความ, x, y, y ระบุตำแหน่งข้อความ, maxWidth เป็นพารามิเตอร์เสริม จำกัด ตำแหน่งข้อความ

context.stroketext (ข้อความ, x, y, maxwidth): เนื้อหาข้อความข้อความ, x, y ระบุตำแหน่งข้อความ, maxWidth เป็นพารามิเตอร์เสริม จำกัด ตำแหน่งข้อความ

// วาดข้อความบนผืนผ้าใบ

context.save (); </p> <p> // ขนาดตัวอักษรคือ 60 ตัวอักษรเป็นผลกระทบ

context.font = "60px pract"; </p> <p> // เติมสี

context.fillstyle = '#996600';

//ศูนย์

context.textalign = 'center'; </p> <p> // วาดข้อความ

Context.fillText ('Happy Trails!', 200, 60, 400);

บริบท restore ();

เงา

เงาสามารถควบคุมได้ผ่านคุณสมบัติบริบททั่วโลกหลายประการ

คุณสมบัติ	ค่า	คำพูด
shadowcolor	ค่าสีใน CSS ใด ๆ	สามารถใช้ความโปร่งใส (อัลฟ่า) ได้
shadowoffsetx	ค่าพิกเซล	ค่าเป็นบวกย้ายเงาไปทางขวา; มันเป็นลบย้ายเงาไปทางซ้าย
shadowoffsety	ค่าพิกเซล	ค่าเป็นบวกเลื่อนเงาลง มันเป็นลบเลื่อนเงาขึ้นไป
shadowblur	ค่าฟัซซี่แบบเกาส์เซียน	ค่าที่ใหญ่ขึ้นก็ยิ่งเบลอขอบของเงามากขึ้นเท่านั้น

// สีดำความโปร่งใส 20%

context.shadowColor = 'rgba (0, 0, 0, 0.2)'; </p> <p> // ย้าย 15px ไปทางขวาและ 10px ไปทางซ้าย

Context.ShadowOffsetx = 15;

context.shadowoffsety = -10; </p> <p> // เงาเบลอเล็กน้อย

Context.ShadowBlur = 2;

ข้อมูลพิกเซล

Context.getImagedata (SX, SY, SW, SH): SX, XY กำหนดจุด, SW: ความกว้าง, SH: ความสูง

ฟังก์ชั่นนี้ส่งคืนคุณสมบัติสามประการ: ความกว้างเท่าใดพิกเซลต่อความสูงของแถวจำนวนพิกเซลต่อคอลัมน์

ข้อมูลพวงของอาร์เรย์ที่มีค่า RGBA (ค่าสีแดง, เขียว, สีน้ำเงินและความโปร่งใส) ของแต่ละพิกเซลที่ได้จากผืนผ้าใบ

Context.putimagedata (Imagedata, DX, DY): อนุญาตให้นักพัฒนาผ่านชุดข้อมูลภาพ DX, DY ใช้เพื่อระบุออฟเซ็ต หากใช้งานฟังก์ชั่นจะข้ามไปยังตำแหน่ง Canvas ที่ระบุเพื่ออัปเดต

แสดงข้อมูลพิกเซลที่เข้ามา

Canvas.todataurl: ข้อมูลที่นำเสนอบนผืนผ้าใบสามารถรับได้ในปัจจุบัน ข้อมูลที่ได้รับจะถูกบันทึกในรูปแบบข้อความและเบราว์เซอร์สามารถแยกวิเคราะห์เป็นภาพได้