HTML5 Canvas ซึ่งเป็นบทช่วยสอนสำหรับผู้เริ่มต้น

ข้อกำหนด HTML5 แนะนำคุณสมบัติใหม่มากมายซึ่งเป็นหนึ่งในคุณสมบัติที่น่าตื่นเต้นที่สุดคือองค์ประกอบ Canvas HTML 5 Canvas ให้วิธีการวาดกราฟิกผ่าน JavaScript ซึ่งใช้งานง่าย แต่ทรงพลัง แต่ละองค์ประกอบของผืนผ้าใบมีบริบท (บริบท) (คิดว่าเป็นหน้าบนกระดานวาดภาพ) ที่สามารถวาดรูปร่างใด ๆ ได้ เบราว์เซอร์รองรับบริบทของผืนผ้าใบหลายแห่งและให้ความสามารถในการวาดภาพกราฟิกผ่าน API ที่แตกต่างกัน เบราว์เซอร์ส่วนใหญ่รองรับบริบทผ้าใบ 2D - รวมถึงโอเปร่า, Firefox, Konqueror และ Safari นอกจากนี้โอเปร่าบางรุ่นยังรองรับผืนผ้าใบ 3 มิติและ Firefox ยังสามารถรองรับผืนผ้าใบ 3 มิติผ่านปลั๊กอิน

บทความนี้แนะนำพื้นฐานของผืนผ้าใบ 2D และวิธีการใช้ฟังก์ชั่นผืนผ้าใบพื้นฐานเช่นเส้นรูปร่างรูปภาพและข้อความ เพื่อทำความเข้าใจบทความนี้คุณควรเข้าใจพื้นฐานของ JavaScript

คุณสามารถคลิกที่นี่เพื่อดาวน์โหลดรหัสตัวอย่างในบทความนี้ในแบทช์

พื้นฐานผ้าใบ:

วิธีการสร้างผ้าใบนั้นง่ายคุณเพียงแค่ต้องเพิ่มองค์ประกอบ <sanvas> ในหน้า HTML:

<canvas id = mycanvas width = 300 ความสูง = 150>

เนื้อหาทางเลือกในกรณีที่เบราว์เซอร์ไม่รองรับผ้าใบ

</sanvas>

ในการอ้างอิงองค์ประกอบใน JavaScript ควรตั้งค่า ID องค์ประกอบ คุณต้องตั้งค่าความสูงและความกว้างของผืนผ้าใบ

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

// รับการอ้างอิงถึงองค์ประกอบ

var elem = document.getElementById ('Mycanvas');

// ตรวจสอบคุณสมบัติและวิธีการเสมอเพื่อให้แน่ใจว่ารหัสของคุณจะไม่แตกหัก

// ในเบราว์เซอร์อื่น ๆ

if (elem && elem.getContext) {

// รับบริบท 2D

// จำไว้ว่า: คุณสามารถเริ่มต้นบริบทหนึ่งบริบทต่อองค์ประกอบเท่านั้น

var context = elem.getContext ('2d');

ถ้า (บริบท) {

// คุณทำเสร็จแล้ว! ตอนนี้คุณสามารถวาดสี่เหลี่ยมแรกของคุณ

// คุณจะต้องให้พิกัด (x, y) ตามด้วยความกว้างและ

// ขนาดความสูง

Context.fillrect (0, 0, 150, 100);

-

-

คุณสามารถวางรหัสด้านบนในส่วนหัวของเอกสารหรือในไฟล์ภายนอก

บริบท 2d API:

หลังจากแนะนำวิธีการสร้างผืนผ้าใบลองมาดูที่ 2D Canvas API เพื่อดูว่าสามารถทำอะไรได้บ้างกับฟังก์ชั่นเหล่านี้

บรรทัดพื้นฐาน:

ตัวอย่างข้างต้นแสดงให้เห็นว่าการวาดสี่เหลี่ยมนั้นง่ายเพียงใด

คุณสมบัติ Fillstyle และ Strokestyle สามารถตั้งค่าได้อย่างง่ายดายสำหรับการเติมสี่เหลี่ยมผืนผ้าและเส้น ค่าสีถูกใช้เช่นเดียวกับ CSS: เลขฐานสิบหก, RGB (), RGBA () และ HSLA Fillrect สามารถใช้ในการวาดสี่เหลี่ยมผืนผ้าด้วย Fillrect ใช้ Strokerect เพื่อวาดรูปสี่เหลี่ยมผืนผ้าที่มีเส้นขอบเท่านั้นและไม่มีการเติม หากคุณต้องการล้างผืนผ้าใบบางอย่างคุณสามารถใช้ ClearRect พารามิเตอร์ของสามวิธีข้างต้นเหมือนกัน: x, y, ความกว้าง, ความสูง พารามิเตอร์สองตัวแรกตั้งค่าพิกัด (x, y) และพารามิเตอร์สองตัวสุดท้ายตั้งค่าความสูงและความกว้างของสี่เหลี่ยม คุณสามารถใช้คุณสมบัติ LineWidth เพื่อเปลี่ยนความหนาของเส้น ลองดูตัวอย่างโดยใช้ Fillrect, Strokerect Clearrect และอื่น ๆ :

context.fillstyle = '#00f'; // สีฟ้า

Context.strokestyle = '#f00'; // สีแดง

Context.lineWidth = 4;

// วาดรูปสี่เหลี่ยมผืนผ้า

Context.fillrect (0, 0, 150, 50);

Context.strokerect (0, 60, 150, 50);

context.clearRect (30, 25, 90, 60);

Context.strokerect (30, 25, 90, 60);

ตัวอย่างนี้แสดงในรูปต่อไปนี้:

เส้นทาง:

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

// ตั้งค่าคุณสมบัติสไตล์

context.fillstyle = '#00f';

Context.strokestyle = '#f00';

Context.lineWidth = 4;

Context.BeginPath ();

// เริ่มจากจุดซ้ายบน

Context.moveto (10, 10); // ให้พิกัด (x, y)

Context.lineto (100, 10);

Context.lineto (10, 100);

Context.lineto (10, 10);

// เสร็จแล้ว! ตอนนี้เติมรูปร่างและวาดจังหวะ

// หมายเหตุ: รูปร่างของคุณจะไม่ปรากฏจนกว่าคุณจะเรียกทั้งสองวิธี

Context.fill ();

Context.stroke ();

บริบท closepath ();

การเรนเดอร์แสดงในรูปต่อไปนี้:

อีกตัวอย่างที่ซับซ้อนยิ่งขึ้นใช้เส้นตรงเส้นโค้งและส่วนโค้ง

แทรกภาพ:

วิธีการ DrawImage ช่วยให้แทรกภาพอื่น ๆ (องค์ประกอบ IMG และ Canvas) ในผืนผ้าใบ ในโอเปร่าคุณสามารถวาดกราฟิก SVG ในผืนผ้าใบ วิธีนี้มีความซับซ้อนมากขึ้นและสามารถมีพารามิเตอร์ 3, 5 หรือ 9

3 พารามิเตอร์: วิธีพื้นฐานที่สุดในการใช้ DrawImage หนึ่งพารามิเตอร์ระบุตำแหน่งภาพและอีกสองพารามิเตอร์ระบุตำแหน่งของภาพในผืนผ้าใบ

5 พารามิเตอร์: วิธีการใช้งาน DrawImage ระดับกลางรวมถึงพารามิเตอร์ 3 ตัวที่กล่าวถึงข้างต้นเพิ่มพารามิเตอร์สองตัวเพื่อระบุความกว้างและความสูงของภาพแทรก (หากคุณต้องการเปลี่ยนขนาดภาพ)

9 พารามิเตอร์: การดึงที่ซับซ้อนที่สุดคือวิธีการใช้งานแบบผสมรวมถึงพารามิเตอร์ 5 ข้างต้นและพารามิเตอร์ 4 ตัวอื่น ๆ ตั้งค่าตำแหน่งและความกว้างความสูงในภาพต้นทาง พารามิเตอร์เหล่านี้ช่วยให้คุณสามารถครอบตัดภาพต้นทางได้แบบไดนามิกก่อนที่จะแสดง

นี่คือสามตัวอย่างของวิธีการใช้งานข้างต้น:

// สามอาร์กิวเมนต์: องค์ประกอบปลายทาง (x, y) พิกัด

บริบท DRAWIMAGE (IMG_ELEM, DX, DY);

// ห้าอาร์กิวเมนต์: องค์ประกอบปลายทาง (x, y) พิกัดและปลายทาง

// ความกว้างและความสูง (หากคุณต้องการปรับขนาดภาพต้นทาง)

บริบท DRAWIMAGE (IMG_ELEM, DX, DY, DW, DH);

// เก้าอาร์กิวเมนต์: องค์ประกอบ, แหล่งที่มา (x, y) พิกัด, ความกว้างของต้นกำเนิดและ

// ความสูง (สำหรับการปลูกพืช), ปลายทาง (x, y) พิกัดและความกว้างปลายทาง

// และความสูง (ปรับขนาด)

บริบท DRAWIMAGE (IMG_ELEM, SX, SY, SW, SH, DX, DY, DW, DH);

เอฟเฟกต์แสดงในรูปด้านล่าง:

การดำเนินการระดับพิกเซล:

บริบท 2D API ให้สามวิธีสำหรับการดำเนินการระดับพิกเซล: CreateImagedata, GetImagedata และ Putimagedata วัตถุ Imagedata บันทึกค่าพิกเซลของภาพ แต่ละวัตถุมีสามคุณสมบัติ: ความกว้างความสูงและข้อมูล ประเภทแอตทริบิวต์ข้อมูลคือ Canvaspixelarray ซึ่งใช้ในการเก็บความกว้าง*ความสูง*4 พิกเซล แต่ละพิกเซลมีค่า RGB และค่าอัลฟ่าโปร่งใส (ค่าของมันคือ 0 ถึง 255 รวมถึงอัลฟา!) ลำดับของพิกเซลจะถูกเก็บไว้จากซ้ายไปขวาจากบนลงล่างตามแถว เพื่อให้เข้าใจหลักการของมันได้ดีขึ้นลองดูตัวอย่าง - วาดสี่เหลี่ยมสีแดง:

// สร้างวัตถุ Imagedata

var imgd = context.createimagedata (50,50);

var pix = imgd.data;

// วนรอบแต่ละพิกเซลและตั้งค่าสีแดงโปร่งใส

สำหรับ (var i = 0; n = pix.length, i <n; i += 4) {

pix [i] = 255; // ช่องสีแดง

Pix [i+3] = 127; // Alpha Channel

-

// วาดวัตถุ Imagedata ที่พิกัด (x, y) ที่กำหนด

Context.putimagedata (IMGD, 0,0);

หมายเหตุ: ไม่ใช่เบราว์เซอร์ทั้งหมดที่ใช้งาน createimagedata ในเบราว์เซอร์ที่ได้รับการสนับสนุนวัตถุ Imagedata จะต้องได้รับผ่านวิธี getImagedata โปรดดูรหัสตัวอย่าง

Imagedata สามารถใช้ในการทำฟังก์ชั่นมากมาย ตัวอย่างเช่นตัวกรองรูปภาพสามารถนำไปใช้หรือการสร้างภาพทางคณิตศาสตร์สามารถนำไปใช้ (เช่นเศษส่วนและเอฟเฟกต์พิเศษอื่น ๆ ) เอฟเฟกต์พิเศษต่อไปนี้ใช้ตัวกรองการผกผันสีอย่างง่าย:

// รับ canvaspixelarray จากพิกัดที่กำหนดและมิติ

var imgd = context.getImagedata (x, y, ความกว้าง, ความสูง);

var pix = imgd.data;

// วนรอบแต่ละพิกเซลและกลับสี

สำหรับ (var i = 0, n = pix.length; i <n; i += 4) {

Pix [i] = 255 - Pix [i]; // สีแดง

Pix [i+1] = 255 - Pix [i+1]; // สีเขียว

Pix [i+2] = 255 - Pix [i+2]; // สีฟ้า

// i+3 คืออัลฟ่า (องค์ประกอบที่สี่)

-

// วาดภาพ imagedata ที่พิกัด (x, y) ที่กำหนด

Context.putimagedata (IMGD, X, Y);

รูปต่อไปนี้แสดงเอฟเฟกต์หลังจากใช้ตัวกรองนี้:

คำ:

แม้ว่า WebKit รุ่นล่าสุดและ Firefox 3.1 Build Nightly เพิ่งเริ่มสนับสนุนข้อความ API เพื่อให้แน่ใจว่ามีความสมบูรณ์ของบทความ แต่ฉันตัดสินใจที่จะแนะนำข้อความ API ที่นี่

คุณสมบัติข้อความต่อไปนี้สามารถตั้งค่าในวัตถุบริบท:

ตัวอักษร: ตัวอักษรข้อความเหมือนกับแอตทริบิวต์ CSSFONT-FAMILY

Textalign: ข้อความการจัดตำแหน่งแนวนอน ค่าแอตทริบิวต์ที่พึงประสงค์: เริ่มต้น, สิ้นสุด, ซ้าย, ขวา, ตรงกลาง ค่าเริ่มต้น: เริ่มต้น

textbaseline: การจัดตำแหน่งแนวตั้งของข้อความ ค่าแอตทริบิวต์ที่พึงประสงค์: ด้านบน, แขวน, กลาง, ตัวอักษร, ความคิด, ด้านล่าง ค่าเริ่มต้น: ตัวอักษร

มีสองวิธีในการวาดข้อความ: Filltext และ Stroketext การวาดข้อความแรกด้วยการเติมเต็มรูปแบบหลังวาดข้อความด้วยเส้นขอบสโตรโคสไตล์เท่านั้น พารามิเตอร์ของทั้งคู่เหมือนกัน: ข้อความที่จะวาดและตำแหน่ง (x, y) พิกัดของข้อความ นอกจากนี้ยังมีตัวเลือกตัวเลือก - ความกว้างสูงสุด หากจำเป็นเบราว์เซอร์จะลดข้อความให้พอดีกับความกว้างที่ระบุ แอตทริบิวต์การจัดตำแหน่งข้อความมีผลต่อตำแหน่งสัมพัทธ์ของข้อความไปยังพิกัดชุด (x, y)

นี่คือตัวอย่างของการวาดข้อความ Hello World ในผืนผ้าใบ:

context.fillstyle = '#00f';

context.font = 'italic 30px sans-serif';

context.textBaseline = 'top';

Context.fillText ('Hello World!', 0, 0);

context.font = 'bold 30px sans-serif';

Context.stroketext ('Hello World!', 0, 50);

ภาพต่อไปนี้คือการแสดงผล:

เงา:

ปัจจุบันมีเพียง Konqueror และ Firefox 3.1 Build Nightly Support the Shadows API คุณสมบัติของ API คือ:

ShadowColor: สีเงา ค่าของมันสอดคล้องกับค่าสี CSS

Shadowblur: กำหนดระดับของ Shadow Blur ยิ่งค่านี้มีขนาดใหญ่เท่าไหร่ก็ยิ่งทำให้เงาเบลอมากขึ้น เอฟเฟกต์ของมันเหมือนกับตัวกรองฟัซซี่ Gaussian ของ Photoshop

Shadowoffsetx และ Shadowoffsety: X และ Y Offsets of the Shadow เป็นพิกเซล

นี่คือตัวอย่างของ Shadow Canvas:

Context.ShadowOffsetx = 5;

บริบท. shadowoffsety = 5;

Context.ShadowBlur = 4;

Context.ShadowColor = 'RGBA (255, 0, 0, 0.5)';

context.fillstyle = '#00f';

Context.fillrect (20, 20, 150, 100);

เอฟเฟกต์แสดงในรูปด้านล่าง:

การไล่ระดับสีสี:

นอกเหนือจากสี CSS แล้วคุณสมบัติ Fillstyle และ Strokestyle สามารถตั้งค่าเป็นวัตถุผ้าใบ -การไล่ระดับสีแบบสีสามารถใช้สำหรับเส้นและเติมผ่าน canvasgradient ในการสร้างวัตถุ canvasgradient คุณสามารถใช้สองวิธี: createLineargradient และ createradialgradient อดีตสร้างการไล่ระดับสีเชิงเส้นและหลังสร้างการไล่ระดับสีแบบวงกลม หลังจากสร้างวัตถุการไล่ระดับสีสีคุณสามารถใช้วิธี addColorStop ของวัตถุเพื่อเพิ่มค่าสีกลางสี รหัสต่อไปนี้แสดงให้เห็นถึงวิธีการใช้การไล่ระดับสี:

// คุณต้องจัดเตรียมพิกัดต้นทางและปลายทาง (x, y)

// สำหรับการไล่ระดับสี (จากจุดเริ่มต้นและจุดสิ้นสุด)

var gradient1 = context.createLineargradient (SX, SY, DX, DY);

// ตอนนี้คุณสามารถเพิ่มสีสันในการไล่ระดับสีของคุณ

// อาร์กิวเมนต์แรกบอกตำแหน่งสำหรับสีในการไล่ระดับสีของคุณ ที่

// ช่วงค่าที่ได้รับการยอมรับคือตั้งแต่ 0 (เริ่มต้นการไล่ระดับสี) ถึง 1 (สิ้นสุดการไล่ระดับสี)

// อาร์กิวเมนต์ที่สองบอกสีที่คุณต้องการโดยใช้รูปแบบสี CSS

การไล่ระดับสี 1.addColorStop (0, '#f00'); // สีแดง

การไล่ระดับสี 1.addColorStop (0.5, '#ff0'); // สีเหลือง

การไล่ระดับสี 1.addColorStop (1, '#00f'); // สีฟ้า

// สำหรับการไล่ระดับสีรัศมีคุณต้องจัดหาแหล่งที่มา

// และรัศมีวงกลมปลายทาง

// พิกัด (x, y) กำหนดจุดศูนย์วงกลม (เริ่มต้นและ

// ปลายทาง).

var gradient2 = context.createradialgradient (sx, sy, sr, dx, dy, dr);

// การเพิ่มสีให้กับเรเดียลไล่ระดับสีเหมือนกับการเพิ่มสีให้เป็นเส้นตรง

// การไล่ระดับสี

ฉันยังเตรียมตัวอย่างที่ซับซ้อนมากขึ้นโดยใช้การไล่ระดับสีเชิงเส้นเงาและข้อความ

เอฟเฟกต์แสดงในรูปด้านล่าง:

การสาธิตผ้าใบ:

หากคุณต้องการทราบว่าคุณสามารถทำอะไรกับ Canvas ได้โปรดดูโครงการต่อไปนี้:

วิดเจ็ตโอเปร่า:

Simaquarium

สมุดร่างของศิลปิน

สไปเรกเดอร์

วิศวกรรมออนไลน์และการสาธิต:

พหุนามนิวตัน

Canvascape - 3D Walker

Paint.web - การสาธิตการวาดภาพโอเพ่นซอร์ส

เที่ยวบินดาวสนาม

หยดอินเทอร์แอคทีฟ

ส่วนย่อย:

Canvas เป็นหนึ่งในคุณสมบัติที่คาดการณ์ไว้มากที่สุดของ HTML 5 และปัจจุบันได้รับการสนับสนุนจากเว็บเบราว์เซอร์ส่วนใหญ่ Canvas สามารถช่วยสร้างเกมและปรับปรุงส่วนต่อประสานผู้ใช้กราฟิก บริบท 2D

API ให้ความสามารถในการวาดกราฟิกมากมาย - ฉันหวังว่าคุณจะได้เรียนรู้เกี่ยวกับการใช้ผ้าใบผ่านบทความนี้และคุณสนใจที่จะเรียนรู้เพิ่มเติม!