<canvas></canvas> เป็นแท็กใหม่ใน HTML5 ที่ใช้ในการวาดกราฟิก จริงๆ แล้วแท็กนี้เหมือนกับแท็กอื่นๆ คุณสมบัติพิเศษของแท็กนี้คือสามารถรับออบเจ็กต์ CanvasRenderingContext2D ซึ่งเราสามารถใช้สคริปต์ JavaScript ได้ เพื่อควบคุมวัตถุนี้เพื่อการวาดภาพ
<canvas></canvas> เป็นเพียงคอนเทนเนอร์สำหรับการวาดภาพกราฟิก นอกจากแอตทริบิวต์ เช่น id คลาส และสไตล์แล้ว ยังมีแอตทริบิวต์ความสูงและความกว้างอีกด้วย มีสามขั้นตอนหลักในการวาดภาพบนองค์ประกอบ <canvas>> :
<canvas> ซึ่งเป็นวัตถุ Canvas ต่อไปนี้เป็นตัวอย่างการวาด <canvas> แบบง่ายๆ:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>การสาธิตการวาดภาพบนผืนผ้าใบ</title> <style type=text/css> #canvas{ border: 1px solid #ADACB0; จอแสดงผล: บล็อก; ระยะขอบ: 20px อัตโนมัติ; } </style></head><body> <canvas id=canvas width=300 height=300> เบราว์เซอร์ของคุณยังไม่รองรับ Canvas </canvas></body><script type=text/javascript> var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //ตั้งค่าจุดเริ่มต้น และจุดสิ้นสุด context.moveTo(10,10); context.lineTo(200,200); // ตั้งค่าสไตล์ context.lineWidth = 2; #F5270B; //วาดบริบท.จังหวะ();</script></html>หากไม่ได้ระบุผ่าน moveTo() จุดเริ่มต้นของ lineTo() จะขึ้นอยู่กับจุดก่อนหน้า ดังนั้น หากคุณต้องการเลือกจุดเริ่มต้นอีกครั้ง คุณจะต้องผ่านเมธอด moveTo() หากคุณต้องการตั้งค่าสไตล์สำหรับส่วนของเส้นต่างๆ คุณต้องเปิดเส้นทางอีกครั้งผ่าน context.beginPath() นี่คือตัวอย่าง:
<script type=text/javascript> var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); // กำหนดจุดเริ่มต้นและจุดสิ้นสุดของวัตถุ context.beginPath(); 100,100) บริบท .lineTo (700,100); context.lineTo (700,400); context.lineWidth = 2; #F5270B; //Draw context. stroke(); context.beginPath(); context.moveTo(100,200); // ผลของการแทนที่ moveTo ด้วย lineTo ที่นี่คือ context.lineTo(600,200); ) ; //หากสีของ strokeStyle มีค่าใหม่ มันจะเขียนทับค่าที่ตั้งไว้ด้านบน //หาก lineWidth ไม่มีค่าใหม่ มันจะถูกแสดงตามค่าที่ตั้งไว้ด้านบน บริบท.จังหวะ();</สคริปต์ >
วาดรูปสี่เหลี่ยมสี่เหลี่ยมผืนผ้า (), fillRect () และ strokeRect ()
<script type=text/javascript> var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //ใช้วิธีแก้ไข context.rect(10,10,190,190); . fillStyle = #3EE4CB; context. strokeStyle = #F5270B; context.fill(); //ใช้วิธี fillRect context.fillStyle = #1424DE; context.fillRect(210,10,190,190); //ใช้วิธี strokeRect และ fillRect ที่ ในเวลาเดียวกัน วิธีการ context.fillStyle = #1424DE; context. strokeStyle = #F5270B; context. strokeRect(610,10,190,190); context.fillRect(610,10,190,190);</script>
ต้องอธิบายสองประเด็นที่นี่: จุดแรกคือลำดับก่อนและหลัง stroke() และ fill() จะถูกวาดในภายหลัง ถ้า fill() ถูกวาดในภายหลัง เมื่อเส้นขอบเส้นใหญ่ขึ้น เส้นขอบจะวาดด้วย stroke() จะถูกครอบคลุมอย่างชัดเจน ครึ่งหนึ่ง จุดที่ 2: เมื่อตั้งค่าแอตทริบิวต์ fillStyle หรือ strokeStyle คุณสามารถตั้งค่าได้ด้วยวิธีการตั้งค่า rgba (255,0,0,0.2)
มีอีกอย่างที่เกี่ยวข้องกับการวาดภาพสี่เหลี่ยม: การล้างพื้นที่สี่เหลี่ยม: context.clearRect(x,y,width,height)
พารามิเตอร์ที่ได้รับ ได้แก่ ตำแหน่งเริ่มต้นของสี่เหลี่ยมใส และความกว้างและความยาวของสี่เหลี่ยม
ในโค้ดด้านบน ให้เพิ่มที่ส่วนท้ายของการวาดกราฟ:
บริบท clearRect (100,60,600,100);
สามารถรับเอฟเฟกต์ต่อไปนี้:
วาดดาวห้าแฉกด้วยการวิเคราะห์ดาวห้าแฉก เราสามารถกำหนดกฎของพิกัดของแต่ละจุดยอดได้ สิ่งหนึ่งที่ควรทราบคือ: บนผืนผ้าใบ ทิศทางของแกน Y จะลดลง
รหัสที่เกี่ยวข้องมีดังนี้:
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.beginPath(); // ตั้งค่าพิกัดของจุดยอดและกำหนดเส้นทางตามจุดสุดยอดสำหรับ (var i = 0; i < 5; i++ ) { context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200, -Math.sin((18+i*72)/180*Math.PI)*200+200); context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+ 200, -Math.sin((54+i*72)/180*Math.PI)*80+200); } context.closePath(); // ตั้งค่ารูปแบบเส้นขอบและเติมสี context.lineWidth=3; context.fillStyle = #F6F152; context. strokeStyle = #F5270B;ผลสุดท้าย:
คุณสมบัติของเส้นนอกเหนือจากแอตทริบิวต์ lineWidth ที่ใช้ด้านบนแล้ว บรรทัดยังมีแอตทริบิวต์ต่อไปนี้:
ชุดคุณสมบัติ lineCap หรือส่งกลับรูปแบบของบรรทัดสูงสุดที่ท้ายบรรทัด โดยอาจรับค่าต่อไปนี้:
ชุดคุณสมบัติ lineJoin หรือส่งคืนชนิดของมุมที่สร้างขึ้นเมื่อสองบรรทัดบรรจบกัน โดยสามารถรับค่าต่อไปนี้:
ชุดคุณสมบัติ miterLimit หรือส่งกลับความยาว miter สูงสุด (ค่าเริ่มต้นคือ 10) ความยาวตุ้มปี่หมายถึงระยะห่างระหว่างมุมด้านในและด้านนอกที่เส้นสองเส้นมาบรรจบกัน miterLimit ใช้ได้เฉพาะเมื่อแอตทริบิวต์ lineJoin เป็น miter
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //ทดสอบคุณสมบัติ lineCap //ตั้งค่าพื้นฐานสำหรับการสังเกตอย่างง่าย context.moveTo(10,10); . moveTo(200,10); context.lineTo(200,200); context.lineWidth=1; context.จังหวะ(); context.beginPath(); context.moveTo(10,50); context.lineTo(200,50); context.lineCap=butt; context.lineWidth=10; context.beginPath() ; context.moveTo(10,100); context.lineTo(200,100); context.lineCap=round; บริบท.จังหวะ(); Context.lineTo(200,150); คุณสมบัติ linJoin //miter context.beginPath(); context.moveTo(300,50); context.lineTo(450,100); context.lineTo(300,150); context.lineJoin=miter; context.lineWidth=10; context.troke(); //round context.beginPath(); context.lineTo(550,100); context.lineTo(400,150); context.lineJoin=round; context.lineWidth=10; context.จังหวะ(); context.beginPath(); context.moveTo(500,50); context.lineTo(650,100); context.lineTo(500,150); context.lineWidth=10; แอตทริบิวต์ miterLimit context.beginPath(); context.moveTo(700,50); context.lineTo(850,100); context.lineTo(700,150); context.lineJoin=miter; context.miterLimit=2; context.lineWidth=10; context.จังหวะสไตล์=#2913EC;
ผลกระทบของค่าที่แตกต่างกันสำหรับแต่ละแอตทริบิวต์มีดังนี้:
เติมสไตล์นอกจากการตั้งค่าสีแล้ว fillStyle และ strokeStyle ที่ใช้ก่อนหน้านี้ยังสามารถตั้งค่าสไตล์การเติมอื่นๆ ได้ที่นี่ เราใช้ fillStyle เป็นตัวอย่าง:
การไล่ระดับสีเชิงเส้นขั้นตอนการใช้งาน
(1) var grd = context.createLinearGradient( xstart , ystart, xend ,yend ) สร้างการไล่ระดับสีเชิงเส้นและตั้งค่าพิกัดเริ่มต้นและสิ้นสุด
(2) grd.addColorStop(stop, color) เพิ่มสีให้กับการไล่ระดับสีเชิงเส้น stop คือค่า 0~1;
(3) context.fillStyle=grd จะถูกกำหนดให้กับบริบท
การไล่ระดับสีในแนวรัศมีวิธีนี้คล้ายกับวิธีการไล่ระดับสีเชิงเส้น ยกเว้นว่าพารามิเตอร์ที่ได้รับในขั้นตอนแรกจะแตกต่างกัน
var grd = context.createRadialGradient(x0, y0, r0, x1, y1, r1) รับพิกัดและรัศมีของจุดศูนย์กลางวงกลมเริ่มต้นและพิกัดและรัศมีของจุดศูนย์กลางวงกลมท้าย
การขยายบิตแมปcreatePattern( img , ทำซ้ำสไตล์) เต็มไปด้วยรูปภาพ และสไตล์ทำซ้ำสามารถทำซ้ำ, ทำซ้ำ-x, ทำซ้ำ-y หรือไม่ทำซ้ำ
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //การไล่ระดับสีเชิงเส้น var grd = context.createLinearGradient(10, 10, 100, 350); grd.addColorStop(0.25,#FC0F31); grd.addColorStop(0.5,#ECF811); grd.addColorStop(0.75,#2F0AF1); grd.addColorStop(1,#160303); context.fillStyle = grd.fillRect(10,10,100,350); grd = บริบท createRadialGradient (325, 200, 0, 325, 200, 200); grd.addColorStop(0,#1EF9F7); grd.addColorStop(0.25,#FC0F31); grd.addColorStop(0.5,#ECF811); ; grd.addColorStop(1,#160303); context.fillStyle = grd; context.fillRect(150,10,350,350); // การเติมบิตแมป var bgimg.src = background.jpg; (){ var pattern = context.createPattern(bgimg, ทำซ้ำ); context.fillStyle = pattern; context. strokeStyle=#F20B0B; context.fillRect(600, 100, 200,200); context. strokeRect(600, 100, 200,200);เอฟเฟกต์มีดังนี้:
การแปลงกราฟิกการแปล: context.translate(x,y) พารามิเตอร์ที่ได้รับคือการแปลจุดเริ่มต้นโดย x ในทิศทางของแกน x และการแปลของ y ในทิศทางของแกน y
การปรับขนาด: context.scale(x,y) พารามิเตอร์ที่ได้รับคือแกนพิกัด x จะถูกปรับขนาดตามสัดส่วน x และแกนพิกัด y จะถูกปรับขนาดตามสัดส่วน y
การหมุน: context.rotate(angle) พารามิเตอร์ที่ได้รับคือมุมการหมุนของแกนพิกัด
ควรสังเกตว่าหลังจากเปลี่ยนกราฟิกแล้ว รูปวาดถัดไปจะเป็นไปตามสถานะก่อนหน้า ดังนั้น หากคุณต้องการกลับสู่สถานะเริ่มต้น คุณต้องใช้ context.save(); และ context.restore(); สถานะปัจจุบัน:
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //translate() context.save(); context.fillStyle = #1424DE; บริบท (0,0,200,200); context.restore(); //scale() context.save(); context.fillStyle = #F5270B; context.scale(0.5,0.5); context.fillRect(500,50,200,200); context.restore(); //rotate() context.save(); .PI / 4); context.fillRect(300,10,200,200);
เอฟเฟกต์มีดังนี้:
อีกสิ่งหนึ่งที่เกี่ยวข้องกับการแปลงกราฟิกคือ: การแปลงเมทริกซ์: context.transform(a, b, c, d, e, f, g) ความหมายของพารามิเตอร์มีดังนี้:
มาตราส่วนแนวนอน (ค่าเริ่มต้น 1)
b เอียงแนวนอน (ค่าเริ่มต้น 0)
c เอียงแนวตั้ง (ค่าเริ่มต้น 0)
d มาตราส่วนแนวตั้ง (ค่าเริ่มต้น 1)
e การกระจัดในแนวนอน (ค่าเริ่มต้นคือ 0)
f การกระจัดในแนวตั้ง (ค่าเริ่มต้นคือ 0)
ผู้อ่านสามารถตรวจสอบผลกระทบของแต่ละพารามิเตอร์ได้ด้วยตนเอง และฉันจะไม่แนะนำทีละรายการที่นี่
วาดเส้นโค้งการวาดเส้นโค้งมี 4 ฟังก์ชัน ได้แก่
context.arc(x,y,r,sAngle,eAngle,ทวนเข็มนาฬิกา); ใช้เพื่อสร้างส่วนโค้ง/เส้นโค้ง (ใช้เพื่อสร้างวงกลมหรือวงกลมบางส่วน) ความหมายของพารามิเตอร์ที่ได้รับ:
|. พารามิเตอร์ |. ความหมาย |
-
|. x |. x พิกัดของจุดศูนย์กลางของวงกลม |
|y|พิกัด Y ของจุดศูนย์กลางวงกลม|
|r|รัศมีของวงกลม|
|sAngle|มุมเริ่มต้นเป็นเรเดียน (ตำแหน่ง 3 นาฬิกาของส่วนโค้งคือ 0 องศา)|
|eAngle|มุมสิ้นสุดเป็นเรเดียน|
|ทวนเข็มนาฬิกา|ไม่บังคับ ระบุว่าควรวาดพล็อตทวนเข็มนาฬิกาหรือตามเข็มนาฬิกา เท็จ = ตามเข็มนาฬิกา จริง = ทวนเข็มนาฬิกา |
นี่คือตัวอย่างบางส่วนของฟังก์ชัน arc() ต่างๆ:
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context. strokeStyle = #F22D0D; context.lineWidth = 2; // วาดวงกลม context.beginPath (100,100, 40 ,0,2*Math.PI); บริบท.จังหวะ(); // วาดบริบทครึ่งวงกลม. context.arc(200,100,40,0,Math.PI); context. stroke(); // วาดครึ่งวงกลม, ทวนเข็มนาฬิกา context.beginPath(); ; context. stroke(); // วาดบริบทครึ่งวงกลมปิด context.arc(400,100,40,0,Math.PI); context.closePath();
เอฟเฟกต์มีดังนี้:
context.arcTo(x1,y1,x2,y2,r); สร้างส่วนโค้ง/เส้นโค้งบนผืนผ้าใบระหว่างสองแทนเจนต์ ความหมายของพารามิเตอร์ที่ได้รับ:
| พารามิเตอร์ | ความหมาย |
|---|---|
| x1 | พิกัด x ของจุดควบคุมส่วนโค้ง |
| ย1 | พิกัด y ของจุดควบคุมส่วนโค้ง |
| x2 | พิกัด x ของจุดสิ้นสุดส่วนโค้ง |
| ย2 | พิกัด y ของจุดสิ้นสุดของส่วนโค้ง |
| ร | รัศมีของส่วนโค้ง |
สิ่งที่ต้องสังเกตที่นี่คือจุดเริ่มต้นของเส้นโค้งที่วาดโดยฟังก์ชัน arcTo จะต้องได้รับการตั้งค่าผ่านฟังก์ชัน moveTo() ฟังก์ชัน arcTo ถูกใช้ด้านล่างเพื่อวาดรูปสี่เหลี่ยมผืนผ้าโค้งมน:
ฟังก์ชั่น createRoundRect(บริบท, x1, y1, ความกว้าง, ความสูง, รัศมี) { // ย้ายไปที่มุมซ้ายบน context.moveTo(x1 + รัศมี, y1); // เพิ่มส่วนของเส้นที่เชื่อมต่อกับมุมขวาบน context.lineTo (x1 + ความกว้าง - รัศมี, y1); // เพิ่มบริบทส่วนโค้ง.arcTo (x1 + ความกว้าง, y1, x1 + ความกว้าง, y1 + รัศมี, รัศมี); // เพิ่มส่วนของเส้นที่เชื่อมต่อกับบริบทมุมขวาล่าง.lineTo(x1 + width, y1 + height - radius); // เพิ่มส่วนโค้ง context.arcTo(x1 + width, y1 + height, x1 + ความกว้าง - รัศมี, y1 + ความสูง, รัศมี); // เพิ่มส่วนของเส้นที่เชื่อมต่อกับบริบทมุมซ้ายล่างlineTo(x1 + รัศมี, y1 + ความสูง); // เพิ่มส่วนโค้ง context.arcTo(x1, y1 + height, x1, y1 + height - radius, radius); // เพิ่มส่วนของเส้นตรงที่เชื่อมต่อกับมุมซ้ายบน context.lineTo(x1, y1 + radius); ส่วนโค้ง Context.arcTo(x1, y1, x1 + รัศมี, y1, รัศมี); context.closePath( } // รับวัตถุ DOM ที่สอดคล้องกับองค์ประกอบผ้าใบ var canvas = document.getElementById('mc'); // รับวัตถุ CanvasRenderingContext2D ที่วาดบนบริบทผ้าใบ var = canvas.getContext('2d'); context.lineWidth = 3; strokeStyle = #F9230B createRoundRect(บริบท, 30, 30, 400, 200, 50); บริบท.จังหวะ();เอฟเฟกต์มีดังนี้:
context.quadraticCurveTo(cpx,cpy,x,y); วาดเส้นโค้ง Bezier กำลังสอง ความหมายของพารามิเตอร์มีดังนี้:
| พารามิเตอร์ | ความหมาย |
|---|---|
| ซีพีเอ็กซ์ | พิกัด x ของจุดควบคุม Bezier |
| สำเนา | พิกัด y ของจุดควบคุม Bezier |
| x | พิกัด x ของจุดสิ้นสุด |
| ย | y พิกัดของจุดสิ้นสุด |
จุดเริ่มต้นของเส้นโค้งคือจุดสุดท้ายในเส้นทางปัจจุบัน หากไม่มีเส้นทาง ให้ใช้เมธอด beginningPath() และ moveTo() เพื่อกำหนดจุดเริ่มต้น
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); วาดเส้นโค้งลูกบาศก์ Bezier ด้วยพารามิเตอร์ต่อไปนี้:
| พารามิเตอร์ | ความหมาย |
|---|---|
| cp1x | พิกัด x ของจุดควบคุมเบซิเยร์จุดแรก |
| cp1y | พิกัด y ของจุดควบคุม Bezier แรก |
| cp2x | พิกัด x ของจุดควบคุมเบซิเยร์ที่สอง |
| cp2y | พิกัด y ของจุดควบคุม Bezier ที่สอง |
| x | พิกัด x ของจุดสิ้นสุด |
| ย | y พิกัดของจุดสิ้นสุด |
ส่วนใหญ่มีคุณสมบัติสามประการและสามวิธีที่เกี่ยวข้องกับการแสดงข้อความ:
| คุณสมบัติ | อธิบาย |
|---|---|
| แบบอักษร | ตั้งค่าหรือส่งคืนคุณสมบัติแบบอักษรปัจจุบันของเนื้อหาข้อความ |
| จัดตำแหน่งข้อความ | ตั้งค่าหรือส่งคืนการจัดตำแหน่งปัจจุบันของเนื้อหาข้อความ |
| ข้อความพื้นฐาน | ตั้งค่าหรือส่งคืนเส้นฐานข้อความปัจจุบันที่ใช้เมื่อวาดข้อความ |
| วิธี | อธิบาย |
|---|---|
| กรอกข้อความ() | วาดข้อความที่เติมบนผืนผ้าใบ |
| จังหวะข้อความ() | วาดข้อความบนผืนผ้าใบ (ไม่มีช่องว่างภายใน) |
| วัดข้อความ() | ส่งกลับวัตถุที่มีความกว้างของข้อความที่ระบุ |
การใช้งานพื้นฐานของคุณสมบัติและวิธีการข้างต้นมีดังนี้:
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.font=bold 30px Arial; // ตั้งค่าสไตล์ context. strokeStyle = #1712F4; 30,100); context.font=bold 50px Arial; var grd = context.createLinearGradient(30 , 200, 400, 300 );//ตั้งค่ารูปแบบการไล่ระดับสี grd.addColorStop(0,#1EF9F7); grd.addColorStop(0.25,#FC0F31); grd.addColorStop(0.5,#ECF811); , #2F0AF1); grd.addColorStop(1,#160303); context.fillStyle = grd; context.fillText(ยินดีต้อนรับสู่บล็อกของฉัน!,30,200); context.moveTo(200,280); context.lineTo(200,420) .จังหวะ(); context.font=bold 20px Arial; context.fillStyle = #F80707; context.textAlign=left; context.fillText(ข้อความเริ่มต้นที่ตำแหน่งที่ระบุ 200,300); context.textAlign=center; context.fillText(ศูนย์กลางของข้อความถูกวางไว้ที่ตำแหน่งที่ระบุ) .textAlign= right; context.fillText(ข้อความสิ้นสุดที่ตำแหน่งที่ระบุ, 200, 400); context.restore(); context.moveTo(10,500); context.lineTo(500,500); context.fillStyle=#F60D0D; context.font=bold 20px Arial; context.fillText(ตำแหน่งที่ระบุอยู่ด้านบน) 10,500); context.textBaseline=ด้านล่าง; context.fillText (ตำแหน่งที่ระบุอยู่ด้านล่าง 150,500); context.textBaseline=middle; context.fillText (ตำแหน่งที่ระบุอยู่ตรงกลาง 300,500); context.font=bold 40px Arial; #16F643; var text = ยินดีต้อนรับสู่บล็อกของฉัน! ; context. strokeText(ยินดีต้อนรับสู่บล็อกของฉัน!,10,600); context. strokeText(ความกว้างของสตริงด้านบนคือ: +context.measureText(text).width,10,650);
เอฟเฟกต์มีดังนี้:
คุณสมบัติและวิธีการอื่น ๆ การวาดภาพเงา:มาเพิ่มเงาให้กับดาวห้าแฉกที่เราวาดไว้ก่อนหน้านี้
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.beginPath(); // ตั้งค่าพิกัดของจุดยอดและกำหนดเส้นทางตามจุดสุดยอดสำหรับ (var i = 0; i < 5; i++ ) { context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200, -Math.sin((18+i*72)/180*Math.PI)*200+200); context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+ 200, -Math.sin((54+i*72)/180*Math.PI)*80+200); } context.closePath(); // ตั้งค่ารูปแบบเส้นขอบและเติมสี context.lineWidth=3; context.fillStyle = #F6F152; context. strokeStyle = #F5270B; context.shadowColor = #F7F2B4; shadowOffsetY = 30; context.shadowBlur = 2; context.fill();เอฟเฟกต์มีดังนี้:
การผสมผสานกราฟิก:globalAlpha: ตั้งค่าหรือส่งคืนค่าอัลฟ่าหรือค่าความโปร่งใสปัจจุบันของภาพวาด
วิธีการนี้มีไว้เพื่อตั้งค่าความโปร่งใสของกราฟิกเป็นหลัก ซึ่งจะไม่ได้กล่าวถึงรายละเอียดในที่นี้
globalCompositeOperation: ตั้งค่าหรือส่งคืนวิธีการวาดภาพใหม่ลงบนรูปภาพที่มีอยู่ วิธีการนี้มีค่าแอตทริบิวต์ต่อไปนี้:
| ค่า | อธิบาย |
|---|---|
| แหล่งที่มามากกว่า | แสดงภาพต้นฉบับเหนือภาพเป้าหมาย (ค่าเริ่มต้น) |
| แหล่งที่มาบน | แสดงภาพต้นฉบับที่ด้านบนของภาพปลายทาง ส่วนของภาพต้นฉบับที่อยู่นอกภาพเป้าหมายจะมองไม่เห็น |
| แหล่งที่มาใน | แสดงภาพต้นฉบับภายในภาพเป้าหมาย เฉพาะส่วนของภาพต้นฉบับภายในภาพปลายทางเท่านั้นที่จะแสดง ภาพปลายทางมีความโปร่งใส |
| แหล่งที่มาออก | แสดงรูปภาพต้นฉบับนอกเหนือจากรูปภาพเป้าหมาย แสดงเฉพาะส่วนของภาพต้นฉบับที่อยู่นอกภาพปลายทางเท่านั้น และภาพปลายทางมีความโปร่งใส |
| ปลายทางมากกว่า | แสดงภาพเป้าหมายเหนือภาพต้นฉบับ |
| จุดหมายปลายทางบนยอด | แสดงภาพปลายทางที่ด้านบนของภาพต้นฉบับ ส่วนของภาพเป้าหมายที่อยู่นอกภาพต้นฉบับจะมองไม่เห็น |
| ปลายทางใน | แสดงภาพปลายทางภายในภาพต้นฉบับ เฉพาะส่วนของภาพเป้าหมายภายในภาพต้นฉบับเท่านั้นที่จะแสดง และภาพต้นฉบับมีความโปร่งใส |
| ปลายทางออก | แสดงภาพเป้าหมายนอกเหนือจากภาพต้นฉบับ เฉพาะส่วนของภาพเป้าหมายที่อยู่นอกภาพต้นฉบับเท่านั้นที่จะแสดง และภาพต้นฉบับมีความโปร่งใส |
| เบากว่า | แสดงภาพต้นฉบับ + ภาพเป้าหมาย |
| สำเนา | แสดงภาพต้นฉบับ ละเว้นภาพเป้าหมาย |
| เอ็กซ์ออร์ | รวมภาพต้นทางและปลายทางโดยใช้การดำเนินการ XOR |
ต่อไปนี้คือตัวอย่างเล็กๆ น้อยๆ ของวิธีการเปลี่ยนชุดค่าผสมด้วยการคลิก:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>ชุดค่าผสมกราฟิก</title> <style type=text/css> #canvas{ border: 1px solid #1C0EFA; display : บล็อก; ระยะขอบ: 20px อัตโนมัติ; } #buttons ขนาดตัวอักษร: 18px; display: block; float: left; margin-left: 20px; } </style></head><body> <canvas id=canvas width=1000 height=800> เบราว์เซอร์ของคุณยังไม่รองรับ ผ้าใบ </canvas> <div id=buttons> <a href=#>แหล่งที่มามากกว่า</a> <a href=#>แหล่งที่มาบน</a> <a href=#>แหล่งที่มาเข้า</a> <a href=#>แหล่งที่มาออก</a> <a href=#>ปลายทางมากกว่า</a> <a href=#>ปลายทางบนยอด</a> <a href=#>ปลายทางใน</a> <a href=#>ปลายทางออก</a> <a href=#>เบาลง</a> <a href=#>คัดลอก</a> <a href=#>xor</a> </div></body><script type=text/javascript>window.onload = function(){ วาด(source-over); ปุ่ม var = document.getElementById(ปุ่ม) getElementsByTagName(a); for (var i = 0; i <button.length; i++) { ปุ่ม[i].onclick = function(){ วาด(this.text); }}; function Draw(compositeStyle){ var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.clearRect(0, 0, canvas.width, canvas.height); context.font = ตัวหนา 40px Arial; context.textAlign = center; context.textBasedline = กลาง; context.fillStyle = #150E0E; context.fillText(globalCompositeOperation = +compositeStyle, canvas.width/2, 60); //วาดบริบทที่เป็นรูปสามเหลี่ยม.fillStyle = #F6082A; context.fillRect(300, 150, 500, 500); globalCompositeOperation = CompositeStyle; context.fillStyle = #1611F5; context.beginPath(); context.moveTo(700, 250); context.lineTo(1,000,750); context.lineTo(400, 750); บริบท </html>ผู้อ่านสามารถคลิกที่ป้ายกำกับเพื่อดูเอฟเฟกต์ต่างๆ รวมกันได้
พื้นที่ตัด:วิธีการ clip() จะตัดรูปร่างและขนาดใดก็ได้จากผืนผ้าใบต้นฉบับ
เคล็ดลับ: เมื่อคุณคลิปพื้นที่ การวาดภาพที่ตามมาทั้งหมดจะถูกจำกัดไว้เฉพาะพื้นที่ที่คลิป (ไม่สามารถเข้าถึงพื้นที่อื่นบนผืนผ้าใบได้) คุณยังสามารถบันทึกพื้นที่แคนวาสปัจจุบันได้โดยใช้เมธอด save() ก่อนที่จะใช้เมธอด clip() และกู้คืนได้ตลอดเวลาในอนาคต (ผ่านเมธอด Restore())
ต่อไปนี้เป็นตัวอย่างของการใช้วงกลมเพื่อตัดสี่เหลี่ยม:
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.fillStyle = #0C0101; context.fillRect(0,0,canvas.width,canvas.height); context.beginPath(); context.fillStyle = #FFFDFD; context.arc(400,400,100,0,2*Math.PI); context.clip(); context.beginPath(); context.fillStyle = #F60825; 50);
นอกเหนือจากแอตทริบิวต์และวิธีการข้างต้นแล้ว ยังมีวิธีการดังต่อไปนี้:
DrawImage(): วาดภาพ แคนวาส หรือวิดีโอลงบนผืนผ้าใบ
toDataURL(): บันทึกกราฟิก
isPointInPath(): คืนค่าเป็นจริงหากจุดที่ระบุอยู่ในเส้นทางปัจจุบัน หากไม่เป็นเช่นนั้น ให้คืนค่าเป็นเท็จ
ฉันจะไม่ยกตัวอย่างทีละคนที่นี่
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network