5 ข้อมูลจำเพาะแนะนำคุณสมบัติใหม่มากมายซึ่งเป็นหนึ่งในสิ่งที่น่าตื่นเต้นที่สุดคือองค์ประกอบของ canvas HTML5 canvas ให้วิธีการวาดกราฟผ่าน JavaScript ซึ่งใช้งานง่าย แต่ทรงพลัง แต่ละองค์ประกอบของ canvas มีบริบท (บริบท) (คิดว่าเป็นหน้าบนกระดานวาดภาพ) ที่สามารถวาดรูปร่างใด ๆ ได้ เบราว์เซอร์รองรับบริบทของผืนผ้าใบหลายรายการและให้ฟังก์ชั่นการวาดภาพกราฟิกผ่านแบบที่แตกต่างกัน ให้ฟังก์ชั่นการวาดภาพกราฟิก 5 ข้อมูลจำเพาะแนะนำคุณสมบัติใหม่มากมายซึ่งเป็นหนึ่งในสิ่งที่น่าตื่นเต้นที่สุดคือองค์ประกอบ HTML5 ให้วิธีการวาดกราฟิกผ่าน JavaScript ซึ่งใช้งานง่าย แต่ทรงพลัง แต่ละองค์ประกอบมีบริบท (บริบท) (คิดว่าเป็นหน้าบนกระดานวาดภาพ) ที่สามารถวาดรูปร่างใด ๆ ได้ เบราว์เซอร์รองรับบริบทของผืนผ้าใบหลายรายการและให้ฟังก์ชั่นการวาดภาพกราฟิกผ่านแบบที่แตกต่างกัน
เบราว์เซอร์ส่วนใหญ่รองรับบริบทผ้าใบ 2D - รวมถึงโอเปร่า, Firefox, Konqueror และ Safari นอกจากนี้โอเปร่าบางรุ่นยังรองรับผืนผ้าใบ 3 มิติและ Firefox ยังสามารถรองรับผืนผ้าใบ 3 มิติผ่านปลั๊กอิน:
บทความบริบท
บทความนี้แนะนำผืนผ้าใบ 2D
พื้นฐานและวิธีการใช้ฟังก์ชั่นผืนผ้าใบพื้นฐานเช่นเส้นรูปร่างรูปภาพและข้อความ เพื่อทำความเข้าใจบทความนี้คุณควรเข้าใจพื้นฐานของ JavaScript
คุณสามารถคลิกที่นี่เพื่อดาวน์โหลดรหัสตัวอย่างในบทความนี้ในแบทช์
วิธีการสร้างผืนผ้าใบนั้นง่ายมากคุณเพียงแค่ต้องเพิ่มองค์ประกอบ <canvas> ลงในหน้า HTML:
<canvas id=mycanvas width=300 height=150>fallback content, in case the browser does not support canvas.</canvas>เพื่อให้สามารถอ้างอิงองค์ประกอบใน JavaScript ได้ดีที่สุดที่จะตั้งค่า ID สำหรับองค์ประกอบ นอกจากนี้ยังต้องตั้งค่าความสูงและความกว้างสำหรับผ้าใบ
เมื่อสร้างผืนผ้าใบให้เตรียมแปรง ในการวาดกราฟในผืนผ้าใบคุณต้องใช้ JavaScript ก่อนอื่นค้นหาผ้าใบผ่านฟังก์ชัน getelementbyid
องค์ประกอบจากนั้นเริ่มต้นบริบท กราฟิกต่าง ๆ สามารถวาดได้ในภายหลังโดยใช้บริบท API สคริปต์ต่อไปนี้วาดสี่เหลี่ยมในผืนผ้าใบ (คลิกที่นี่เพื่อดูเอฟเฟกต์):
// get a reference to the element.var elem = document.getelementbyid('mycanvas');// always check for properties 和methods, to make sure your code doesn't break // in other browsers.if (elem && elem.getcontext) { // get the 2d context. // remember: you can only initialize one context per element. var context = elem.getcontext('2d'); if (context) { // you are done! now you can draw your first rectangle. // you only need to provide the (x,y) coordinates, followed by the width and // height dimensions. context.fillrect(0, 0, 150, 100); }} คุณสามารถวางรหัสด้านบนในส่วน head ของเอกสารหรือในไฟล์ภายนอก
หลังจากแนะนำวิธีการสร้างผืนผ้าใบลองมาดูที่ 2D Canvas API และดูว่าสามารถทำอะไรได้บ้างกับฟังก์ชั่นเหล่านี้
ตัวอย่างข้างต้นแสดงให้เห็นว่าการวาดสี่เหลี่ยมนั้นง่ายเพียงใด
คุณสมบัติ Fillstyle และ Strokestyle สามารถตั้งค่าได้อย่างง่ายดายสำหรับการเติมสี่เหลี่ยมผืนผ้าและเส้น วิธีการใช้ค่าสีและหมายเลขเลขฐานสิบหก, (), () และ () (ถ้าเบราว์เซอร์รองรับเช่นโอเปร่า
10 และ Firefox 3) () (ถ้าเบราว์เซอร์รองรับเช่น OperA10 และ Firefox 3) () และ () (ถ้าเบราว์เซอร์รองรับเช่น OperA10 และ Firefox 3) (), () และ () (ถ้าเบราว์เซอร์รองรับเช่น OperA10 และ Firefox 3) เลขฐานสิบหก, (), () และ () (ถ้าได้รับการสนับสนุนโดยเบราว์เซอร์เช่น OperA10 และ Firefox 3)
fillrect สามารถใช้เพื่อวาดสี่เหลี่ยมผืนผ้าเติม ใช้ strokerect เพื่อวาดรูปสี่เหลี่ยมผืนผ้าที่มีเส้นขอบเท่านั้นและไม่มีการเติม หากคุณต้องการล้างผืนผ้าใบบางอย่างคุณสามารถใช้ clearrect พารามิเตอร์ของสามวิธีข้างต้นเหมือนกัน: x , y , ความกว้าง , ความสูง พารามิเตอร์สองตัวแรกตั้งค่าพิกัด (x, y) และพารามิเตอร์สองตัวสุดท้ายตั้งค่าความสูงและความกว้างของสี่เหลี่ยม
คุณสามารถใช้แอตทริบิวต์ LineWidth เพื่อเปลี่ยนความหนาของเส้น มาดูกันว่ามีการใช้ fillrect หรือไม่
strokerect clearrect และตัวอย่างอื่น ๆ :
context.fillstyle = '#00f'; // bluecontext.strokestyle = '#f00'; // redcontext.linewidth = 4;// draw some rectangles.context.fillrect (0, 0, 150, 50);context.strokerect(0, 60, 150, 50);context.clearrect (30, 25, 90, 60);context.strokerect(30, 25, 90, 60);ตัวอย่างนี้แสดงในรูปที่ 1
รูปที่ 1: Fillrect, Strokerect และ
ไดอะแกรม Effect ClearRect
รูปร่างตามอำเภอใจสามารถวาดได้ผ่านเส้นทางผืนผ้าใบ (เส้นทาง) คุณสามารถวาดโครงร่างก่อนจากนั้นวาดเส้นขอบและเติม การสร้างรูปร่างที่กำหนดเองนั้นง่าย ๆ เริ่มวาดด้วย beginpath() จากนั้นวาดรูปของคุณด้วยเส้นตรงเส้นโค้งและกราฟิกอื่น ๆ หลังจากวาดรูปให้ fill และ stroke เพื่อเพิ่มการเติมหรือตั้งเส้นขอบ โทร closepath() เพื่อสิ้นสุดการวาดกราฟิกที่กำหนดเอง
นี่คือตัวอย่างของการวาดรูปสามเหลี่ยม:
// set the style properties.context.fillstyle = '#00f';context.strokestyle = '#f00';context.linewidth = 4;context.beginpath();// start from the top-left point.context.moveto(10, 10); // give the (x,y) coordinatescontext.lineto(100, 10);context.lineto(10, 100);context.lineto(10, 10);// done! now fill the shape, 和draw the stroke.// note: your shape will not be visible until you call any of the two methods.context.fill();context.stroke();context.closepath();การเรนเดอร์แสดงในรูปที่ 2
รูปที่ 2: สามเหลี่ยม
อีกตัวอย่างหนึ่งที่มีความรับผิดชอบใช้เส้นตรงเส้นโค้งและส่วนโค้ง
วิธี drawimage ช่วยให้แทรกภาพอื่น ๆ ในผืนผ้าใบ
(องค์ประกอบ img และ canvas ) ในโอเปอเรเตอร์คุณสามารถวาดกราฟิก SVG ในผืนผ้าใบ วิธีนี้ค่อนข้างซับซ้อนและสามารถมีพารามิเตอร์ 3, 5 หรือ 9:
drawimage หนึ่งพารามิเตอร์ระบุตำแหน่งภาพและอีกสองพารามิเตอร์ระบุตำแหน่งของภาพในผืนผ้าใบdrawimage ระดับกลางรวมถึงพารามิเตอร์ 3 ตัวที่กล่าวถึงข้างต้นเพิ่มพารามิเตอร์สองตัวเพื่อระบุความกว้างและความสูงของภาพแทรก (หากคุณต้องการเปลี่ยนขนาดภาพ)drawimage ที่ซับซ้อนที่สุดรวมถึงพารามิเตอร์ 5 ข้างต้นและพารามิเตอร์ 4 ตัวอื่น ๆ ตั้งค่าตำแหน่งและความกว้างความสูงในภาพต้นทาง พารามิเตอร์เหล่านี้ช่วยให้คุณสามารถครอบตัดภาพต้นทางได้แบบไดนามิกก่อนที่จะแสดงนี่คือสามตัวอย่างของวิธีการใช้งานข้างต้น:
// three arguments: the element, destination (x,y) coordinates.context.drawimage( img_elem , dx , dy );// five arguments: the element, destination (x,y) coordinates, and destination // width and height (if you want to resize the source image).context.drawimage( img_elem , dx , dy , dw , dh );// nine arguments: the element, source (x,y) coordinates, source width and // height (for cropping), destination (x,y) coordinates, and destination width // and height (resize).context.drawimage( img_elem , sx , sy , sw , sh , dx , dy , dw , dh );เอฟเฟกต์แสดงในรูปที่ 3
รูปที่ 3: การเรนเดอร์ drawimage
บริบท 2D API มีวิธีการสามวิธีสำหรับการดำเนินการระดับพิกเซล: createimagedata , getimagedata และ
putimagedata
วัตถุ imagedata บันทึกค่าพิกเซลของภาพ แต่ละวัตถุมีสามคุณสมบัติ: ความกว้าง ความสูง และ
ข้อมูล . ประเภทแอตทริบิวต์ ข้อมูล คือ Canvaspixelarray ซึ่งใช้ในการเก็บ width * height *4 พิกเซล แต่ละพิกเซลมีค่า RGB และค่าอัลฟ่าโปร่งใส (ค่าของมันคือ 0 ถึง
255 รวมถึงอัลฟ่า!) ลำดับของพิกเซลจะถูกเก็บไว้จากซ้ายไปขวาจากบนลงล่างตามแถว
เพื่อให้เข้าใจหลักการของมันได้ดีขึ้นลองดูตัวอย่าง - วาดรูปสี่เหลี่ยมสีแดง
// create an imagedata object.var imgd = context.createimagedata(50,50);var pix = imgd.data;// loop over each pixel 和set a transparent red.for (var i = 0; n = pix.length, i < n; i += 4) { pix[i ] = 255; // red channel pix[i+3] = 127; // alpha channel}// draw the imagedata object at the given (x,y) coordinates.context.putimagedata(imgd, 0,0); หมายเหตุ: ไม่ใช่เบราว์เซอร์ทั้งหมดที่ใช้งาน createimagedata ในเบราว์เซอร์ที่ได้รับการสนับสนุนวัตถุ imagedata จะต้องได้รับผ่านวิธี getimagedata โปรดดูรหัสตัวอย่าง
ฟังก์ชั่นมากมายสามารถทำได้ผ่าน imagedata ตัวอย่างเช่นตัวกรองรูปภาพสามารถนำไปใช้หรือการสร้างภาพทางคณิตศาสตร์สามารถนำไปใช้ (เช่นเศษส่วนและเอฟเฟกต์พิเศษอื่น ๆ ) เอฟเฟกต์พิเศษต่อไปนี้ใช้ตัวกรองการผกผันสีอย่างง่าย:
// get the canvaspixelarray from the given coordinates and dimensions.var imgd = context.getimagedata( x , y , width , height );var pix = imgd.data;// loop over each pixel and invert the color.for (var i = 0, n = pix.length; i < n; i += 4) { pix[i ] = 255 - pix[i ]; // red pix[i+1] = 255 - pix[i+1]; // green pix[i+2] = 255 - pix[i+2]; // blue // i+3 is alpha (the fourth element)}// draw the imagedata at the given (x,y) coordinates.context.putimagedata(imgd, x , y );รูปที่ 4 แสดงโอเปร่าหลังจากใช้ตัวกรองนี้
รูปภาพ (รูปที่ 3 เป็นภาพต้นฉบับ)
รูปที่ 4: ตัวกรองผกผันสี
แม้ว่า WebKit รุ่นล่าสุดและ Firefox 3.1 Build Nightly ได้เริ่มสนับสนุน API ข้อความเท่านั้นเพื่อให้แน่ใจว่ามีความสมบูรณ์ของบทความ แต่ฉันตัดสินใจที่จะแนะนำข้อความ API ที่นี่
คุณสมบัติข้อความต่อไปนี้สามารถตั้งค่าในวัตถุ context :
font : ตัวอักษรข้อความเหมือนกัน แอตทริบิวต์แอตทริบิวต์ font-family
textalign : ข้อความการจัดตำแหน่งแนวนอน ค่าแอตทริบิวต์ที่พึงประสงค์: start end , left , right center ค่าเริ่มต้น:
start .
textbaseline : การจัดตำแหน่งแนวตั้งของข้อความ ค่าแอตทริบิวต์ที่ต้องการ: top , hanging , middle , alphabetic , ideographic , bottom ค่าเริ่มต้น: alphabetic
มีสองวิธีในการวาดข้อความ: 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);รูปที่ 5 คือการเรนเดอร์
รูปที่ 5: เอฟเฟกต์ข้อความ
ปัจจุบันมีเพียง Konqueror และ Firefox 3.1 Build Nightly Support Shadows API คุณสมบัติของ API คือ:
shadowcolor : สีเงา ค่าของมันสอดคล้องกับค่าสี CSSshadowblur : กำหนดระดับของ Shadow Blur ยิ่งค่านี้มีขนาดใหญ่เท่าไหร่ก็ยิ่งทำให้เงาเบลอมากขึ้น เอฟเฟกต์ของมันเหมือนกับตัวกรองฟัซซี่แบบเกาส์เซียนใน Photoshopshadowoffsetx และ shadowoffsety : Offsets X และ Y ของ Shadow ในพิกเซลนี่คือตัวอย่างของ Shadow Canvas:
context.shadowoffsetx = 5;context.shadowoffsety = 5;context.shadowblur = 4;context.shadowcolor = 'rgba(255, 0, 0, 0.5)';context.fillstyle = '#00f';context.fillrect(20, 20, 150, 100);เอฟเฟกต์แสดงในรูปที่ 6
รูปที่ 6: เอฟเฟกต์เงาผ้าใบ - สี่เหลี่ยมสีน้ำเงิน, เงาสีแดง
นอกเหนือจากสี CSS แล้วคุณสมบัติ fillstyle และ strokestyle ยังสามารถตั้งค่าเป็นวัตถุ canvasgradient - canvasgradient สามารถใช้การไล่ระดับสีสำหรับเส้นและเติม
ในการสร้างวัตถุ canvasgradient คุณสามารถใช้สองวิธี: createlineargradient และ createradialgradient อดีตสร้างการไล่ระดับสีเชิงเส้นและหลังสร้างการไล่ระดับสีแบบวงกลม
หลังจากสร้างวัตถุการไล่ระดับสีสีคุณสามารถใช้วิธี addcolorstop ของวัตถุเพื่อเพิ่มค่าสีกลางสี
รหัสต่อไปนี้แสดงให้เห็นถึงวิธีการใช้การไล่ระดับสี:
// you need to provide the source 和destination (x,y) coordinates // for the gradient (from where it starts 和where it ends).var gradient1 = context.createlineargradient( sx , sy , dx , dy );// now you can add colors in your gradient.// the first argument tells the position for the color in your gradient. the // accepted value range is from 0 (gradient start) to 1 (gradient end).// the second argument tells the color you want, using the css color format.gradient1.addcolorstop(0, '#f00'); // redgradient1.addcolorstop(0.5, '#ff0'); // yellowgradient1.addcolorstop(1, '#00f'); // blue// for the radial gradient you also need to provide source// 和destination circle radius.// the (x,y) coordinates define the circle center points (start 和// destination).var gradient2 = context.createradialgradient( sx , sy , sr , dx , dy , dr );// adding colors to a radial gradient is the same as adding colors to linear // gradients.ฉันยังเตรียมตัวอย่างที่ซับซ้อนมากขึ้นโดยใช้การไล่ระดับสีเชิงเส้นเงาและข้อความ เอฟเฟกต์แสดงในรูปที่ 7
รูปที่ 7: ตัวอย่างการใช้การไล่ระดับสีเชิงเส้น
หากคุณต้องการทราบว่าคุณสามารถทำอะไรกับ Canvas ได้โปรดดูโครงการต่อไปนี้:
สมุดร่าง
การสาธิตโอเพ่นซอร์ส
เที่ยวบิน
Canvas เป็นหนึ่งในคุณสมบัติที่คาดการณ์ไว้มากที่สุดของ HTML5 และได้รับการสนับสนุนจากเว็บเบราว์เซอร์ส่วนใหญ่ Canvas สามารถช่วยสร้างเกมและปรับปรุงส่วนต่อประสานผู้ใช้กราฟิก บริบท 2D
API ให้ความสามารถในการวาดภาพกราฟิกมากมาย - ฉันหวังว่าคุณจะได้เรียนรู้เกี่ยวกับการใช้ผ้าใบผ่านบทความนี้และคุณสนใจที่จะเรียนรู้เพิ่มเติม!