วิธีใช้ภาพวาด Canvas ใน html5

Canvas เป็นส่วนหนึ่งของ HTML5 และอนุญาตให้ภาษาสคริปต์แสดงรูปภาพแบบไดนามิก Canvas กำหนดพื้นที่ ความกว้างและความสูงของพื้นที่สามารถกำหนดได้ด้วยแอตทริบิวต์ HTML สามารถเข้าถึงพื้นที่และเรนเดอร์การเรนเดอร์แบบไดนามิกบนหน้าเว็บผ่านชุดฟังก์ชันการวาดภาพ (API)

เกม: ไม่ต้องสงสัยเลยว่าเกมมีบทบาทสำคัญในด้าน HTML5 HTML5 เป็นสามมิติและซับซ้อนกว่า Flash ในแง่ของการแสดงภาพบนเว็บ

การผลิตแผนภูมิ: การผลิตแผนภูมิมักถูกละเลยโดยผู้คน แต่การสื่อสารและความร่วมมือภายในองค์กรหรือระหว่างองค์กรจะแยกออกจากแผนภูมิไม่ได้ นักพัฒนาซอฟต์แวร์บางรายใช้ HTML/CSS เพื่อสร้างไอคอน แน่นอนว่าการใช้ SVG (Scalable Vector Graphics) เพื่อสร้างแผนภูมิให้เสร็จสมบูรณ์ก็เป็นวิธีที่ดีมากเช่นกัน

การออกแบบแบบอักษร: การเรนเดอร์แบบอักษรแบบกำหนดเองจะเป็นแบบเว็บโดยสมบูรณ์และใช้งานโดยใช้เทคโนโลยี HTML5

โปรแกรมแก้ไขกราฟิก: โปรแกรมแก้ไขกราฟิกสามารถใช้งานได้บนเว็บ 100%

เนื้อหาอื่นๆ ที่สามารถฝังอยู่ในเว็บไซต์ได้ เช่น กราฟิก เสียง วิดีโอ และองค์ประกอบอื่นๆ สามารถรวมเข้ากับเว็บได้ดีขึ้นและไม่ต้องใช้ปลั๊กอินใดๆ

1. เมื่อใช้ <canvas> คุณต้องตั้งค่าแอตทริบิวต์ความกว้างและความสูงก่อน และระบุขนาดของพื้นที่ที่วาดได้ หากคุณระบุเฉพาะความกว้างและความสูงโดยไม่เพิ่มสไตล์หรือวาดภาพ องค์ประกอบจะไม่ปรากฏบนหน้า .

 <canvas id='draw' width='200px' height='200px'></canvas>

2. ในการวาดภาพ ก่อนอื่นเราต้องเรียกเมธอด getContext() จากนั้นส่งผ่านชื่อบริบท (2D/3D) 2D มีการดำเนินการวาดขั้นพื้นฐานสองแบบ |. fill (fillStyle) | ) | ค่าเริ่มต้นของคุณสมบัติทั้งสองนี้คือ #000

 var Draw = document.getElementById('draw'); //ยืนยันว่าเบราว์เซอร์รองรับองค์ประกอบ <canvas> if(draw.getContext){ var context = Draw.getContext('2d'); //วาดเส้นขอบสีแดงไปที่ บริบท context. strokeStyle = '#f00'; // สีของทุ่งหญ้าบริบทภายในที่เต็มไปด้วย .fillStyle = '# 0f0';}

3. ใช้เมธอด toDataURL() เพื่อส่งออกภาพที่วาดบนองค์ประกอบ <canvas>

 var Draw = document.getElementById('draw');if(draw.getContext){ //แสดงรูปภาพ toDataURL() รับสตริงของสตริง base64 var DrawURL = Draw.toDataURL('image/png') ; = document.createElement('img'); image.src = DrawURL; document.body.appendChild(รูปภาพ);

4. มีสามวิธีหลักในการวาดรูปสี่เหลี่ยมผืนผ้า fillRect() คือสีเติมของสี่เหลี่ยม strokeRect() คือเส้นขีดของสี่เหลี่ยม และ clearRect() ล้างสี่เหลี่ยม ทั้งสามวิธีนี้ได้รับพารามิเตอร์ 4 ตัว x/y/w/h พิกัดของมุมซ้ายบนของสี่เหลี่ยมผืนผ้า และความกว้างและความสูง

 var Draw = document.getElementById('draw'); //ยืนยันว่าเบราว์เซอร์รองรับองค์ประกอบ <canvas> if(draw.getContext){ var context = Draw.getContext('2d'); //วาดรูปสี่เหลี่ยมสีแดงและ ขอบสีเขียว context.fillStyle = '#f00'; context. strokeStyle = '#0f0'; context. strokeRect(10,10,50,50); context.fillRect(10,10,50,50); //วาดรูปสี่เหลี่ยมสีเขียวด้วยเส้นขีดสีแดง context.fillStyle = '#0f0'; context. strokeStyle = '#f00'; , 50); บริบท. fillRect (10,10,50,50); //ล้างสี่เหลี่ยมเล็กๆ โดยที่สี่เหลี่ยมทั้งสองทับซ้อนกัน context.clearRect(40,40,10,10);}

5. วาดเส้นทาง สามารถสร้างรูปร่างและเส้นที่ซับซ้อนผ่านเส้นทางได้ ในการวาดเส้นทาง ขั้นแรกให้เรียกเมธอด beginningPath() จากนั้นใช้วิธีการต่อไปนี้เพื่อวาดเส้นทางจริง

ส่วนโค้ง (x, y, รัศมี, startAngle, endAngle, ทวนเข็มนาฬิกา)

(x, y) พิกัดศูนย์กลางวงกลม รัศมี (startAngle, endAngle) มุมเริ่มต้นและมุมสิ้นสุด ทวนเข็มนาฬิกาตามเข็มนาฬิกา (เท็จ)/ทวนเข็มนาฬิกา (จริง)

moveTo(x,y) เลื่อนเคอร์เซอร์ไปที่ (x,y) โดยไม่ต้องลากเส้น สามารถใช้เพื่อแก้ไขสิ่งที่เรียกว่าพิกัดจุดก่อนหน้า*

ส่วนโค้งTo(x1,y1,x2,y2,รัศมี)

วาดเส้นโค้งโดยเริ่มจากจุดก่อนหน้าถึง (x2, y2) และผ่าน (x1, y1) ด้วยรัศมีที่กำหนด

lineTo(x,y) ลากเส้นตรงจากจุดก่อนหน้าไปที่ (x,y)

ตรง(x,y,ความกว้าง,ความสูง)

วาดรูปสี่เหลี่ยมผืนผ้าโดยเริ่มจาก (x, y) โดยให้ความกว้างและความสูงเท่ากับความกว้างและความสูง วิธีการนี้วาดเส้นทางสี่เหลี่ยมแทนรูปร่างอิสระที่วาดโดย strokeRect() และ fillRect()

 //ถัดไป วาดนาฬิกาโดยไม่มีตัวเลข var Draw = document.getElementById('draw');if(draw.getContext){ var context = Draw.getContext('2d'); //Start path context.beginPath( ); /วาดวงกลมด้านนอก context.arc(100,100,99,0,2*Math.PI,false); //วาดวงกลมด้านใน context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); //วาดเข็มนาที context.moveTo(100,100); ,15) ; //วาดเข็มชั่วโมง context.moveTo(100,100); context.lineTo(35,100); //เส้นทางเส้นขีด context. stroke(); context. strokeStyle = '#f00';

6. มีสองวิธีหลักในการวาดข้อความ fillText() และ strokeText() ซึ่งทั้งสองวิธีได้รับพารามิเตอร์สี่ตัว |text (ข้อความที่จะวาด)|x|y|ความกว้างพิกเซลสูงสุด (เป็นทางเลือก)| สองวิธีนี้คือ ตามคุณสมบัติ 3 ประการต่อไปนี้

รูปแบบข้อความ ขนาด แบบอักษร ฯลฯ

textAlign การจัดแนวข้อความ |เริ่มต้น|สิ้นสุด|ซ้าย|ขวา|กึ่งกลาง|

textBaseline เส้นพื้นฐานของข้อความ|ด้านบน|แขวน|กลาง|ตัวอักษร|อุดมคติ|ด้านล่าง|

 //วาด 12 นาฬิกาบนหน้าปัด context.font = 'bold 12px Arial'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillText('12',100,20);

7. การเปลี่ยนแปลง

หมุน (เทวดา) หมุนเรเดียนมุมของภาพรอบจุดกำเนิด

scale(scaleX,scaleY) ปรับขนาดรูปภาพ, x*scaleX,y*scaleY มีค่าเริ่มต้นเป็น 1

Translate(x,y) ย้ายแหล่งกำเนิดพิกัดไปที่ (x,y)

 var Draw = document.getElementById('draw'); if(draw.getContext){ var context = Draw.getContext('2d'); //เริ่มเส้นทางบริบท.beginPath(); 100,100,99,0,2*Math.PI,false); //วาดบริบทวงกลมด้านในmoveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); //แปลงบริบทต้นกำเนิด.แปล(100,100); //หมุนมือ context.rotate(1) //วาดบริบทของเข็มนาที moveTo(0, 0); context.lineTo(0,-85); //วาดเข็มชั่วโมง context.moveTo(0,0); //เส้นทางเส้นขีด context. stroke(); context. strokeStyle = '#f00';

8. วาดภาพ, DrawImage()

 var img = document.getElementByTagNames('image')[0]; context.drawImage(img,0,10,50,50,0,100,40,60);

9 พารามิเตอร์: รูปภาพที่จะวาด, รูปภาพต้นฉบับ |x|y|w|h|, รูปภาพเป้าหมาย |x|y|w|h|

9. เงาและการไล่ระดับสี

Shadow ส่วนใหญ่มีค่าแอตทริบิวต์ต่อไปนี้:

1. เงาสี
2. shadowOffsetX: ออฟเซ็ตเงาของแกน X
3. shadowOffsetY: การชดเชยเงาของแกน Y
4. shadowBlur: จำนวนพิกเซลที่เบลอ ค่าเริ่มต้นคือ 0 ไม่เบลอ

 var context = Draw.getContext('2d'); //Set shadow context.shadowColor = 'rgba(210,210,210,.5)'; context.shadowOffersetX = '5'; การไล่ระดับสีสร้างเมธอดการไล่ระดับสีเชิงเส้นใหม่ที่นั่น คือพารามิเตอร์สี่ตัว |x1|y1|x2|y2| ซึ่งเป็นพิกัดของจุดเริ่มต้นและพิกัดของจุดสิ้นสุด var การไล่ระดับสี = context.createLinearGradient(30,30,70,70); การไล่ระดับสี.addColorStop(0,'#fff'); //0 หมายถึงการเริ่มต้นการไล่ระดับสี.addColorStop(1,'#000'); //1 หมายถึงการสิ้นสุด//การใช้งาน แอตทริบิวต์การไล่ระดับสีที่กำหนด context.fillStyle = การไล่ระดับสี // ใส่ในการไล่ระดับสีเมื่อเติม context.fillRect (30,30,50,50);

สร้างการไล่ระดับสีแบบรัศมี createRadialGradient() พารามิเตอร์ทั้งหกตัว |x1|y2|radius1|x2|y2|radius2| เป็นจุดศูนย์กลางวงกลมแรกและรัศมี และจุดศูนย์กลางวงกลมที่สองและรัศมีตามลำดับ การใช้งานจะเหมือนกับการไล่ระดับสีเชิงเส้น

10. เมื่อใช้ข้อมูลรูปภาพ คุณสามารถรับข้อมูลรูปภาพต้นฉบับผ่าน getImageData() พารามิเตอร์สี่ตัว |x|y|w|h| วัตถุ ImageData แต่ละรายการมีคุณลักษณะสามประการ ได้แก่ ความกว้าง/ความสูง/ข้อมูล Data คืออาร์เรย์ที่เก็บข้อมูลของแต่ละพิกเซลไว้ภายใน ค่าของแต่ละองค์ประกอบอยู่ระหว่าง 0-255

 var imgdata = context.getImageData (0,0,100,100); var data = imgdata.data, red = data [0], green = data [1], blue = data [2], alpha = data [3]; ตัวกรองสีเทา var Draw = document.getElementById('draw'); if(draw.getContext){ var context = Draw.getContext('2d'); = document.getElementsByTagName('image')[0], imageData,data, i,len,average, red,green,blue,alpha; //วาดภาพต้นฉบับ context.drawImage(img,0,0,100,100); // รับข้อมูลรูปภาพ imageData = context.getImageData(0,0,img.width,img.height); data = imageData.data; สำหรับ (i=0,len=data.length;i<len;i+=4){ red = data[i]; green = data[i+1]; blue = data[i+2]; i+3]; // คำนวณค่าเฉลี่ยของ rgb เฉลี่ย = Math.floor((red+green+blue)/3); // ตั้งค่าข้อมูลสี [i] = ค่าเฉลี่ย; ; data[i+2] = ค่าเฉลี่ย; } imageData.data = ข้อมูล; // วาดข้อมูลบนผืนผ้าใบ context.putImageData (imageData,0,0)}

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network