กรณีการใช้งานที่สองของ fillStyle คือการเติมแบบไล่ระดับสี สีไล่ระดับสีแบ่งออกเป็นสีไล่ระดับสีเชิงเส้นและสีไล่ระดับสีแบบรัศมี
การไล่ระดับสีเชิงเส้น: แบ่งออกเป็นสองขั้นตอนโดยประมาณ
ขั้นตอนที่ 1: ใช้ฟังก์ชันใหม่ createLinearGradient(xstart,ystart,xend,yend);var linearGrad = context.createLinearGradient(xstart,ystart,xend,yend);
มันมีสี่พารามิเตอร์ พวกมันคือ xstart, ystart, xend และyend ตามลำดับ ซึ่งประกอบเป็นสองพิกัด และพิกัดทั้งสองนี้ประกอบเป็นส่วนของเส้นตรง ส่วนของเส้นนี้จริงๆ แล้วเป็นเส้นไล่ระดับสี เส้นไล่ระดับสีใช้เพื่อกำหนดทิศทางและขนาดของการไล่ระดับสี
ขั้นตอนที่สอง: เพิ่ม colorStop ตามเส้นไล่ระดับสีนี้ วิธีการนี้เรียกว่า addColorStop(หยุด, สี) มันมีสองพารามิเตอร์: หยุดและสี พารามิเตอร์แรกคือค่าทศนิยมที่ใช้ในการกำหนดตำแหน่งของสีคีย์ พารามิเตอร์ตัวที่สองใช้เพื่อกำหนดสีของสีหลัก linearGrad.addColorStop(หยุด,สี);
หลังจากเสร็จสิ้นสองขั้นตอนนี้แล้ว ตัวแปร linearGrad ก็สามารถส่งผ่านไปยังแอตทริบิวต์นี้เป็น fillStyle ได้
ดูรหัส:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA -เนื้อหาที่เข้ากันได้=ie=edge> <title>การไล่ระดับสีเชิงเส้น</title></head><body> <canvas id=canvas style=border: 1px solid #aaa;display:block;margin:0 auto></canvas></body></html><script> window.onload = function () { var canvas = document.getElementById(canvas.width = 800 ; canvas.height = 600; if (canvas.getContext(2d)) { var context = canvas.getContext(2d); // รับสภาพแวดล้อมการวาดภาพบริบท var linearGrad = context.createLinearGradient(0, 0, 800, 600); // พิกัดเริ่มต้นของเส้นไล่ระดับสีคือ (0,0) และพิกัดสิ้นสุดคือ (800,600) linearGrad.addColorStop(0.0, '#000'); พารามิเตอร์แรกแสดงถึงตำแหน่งของสีหลัก 0 หมายถึงตำแหน่งเริ่มต้น 1 หมายถึงตำแหน่งสิ้นสุด และพารามิเตอร์ที่สองแสดงถึงสีของสีหลัก linearGrad.addColorStop(1.0, '#fff'); context.fillStyle = linearGrad; context.fillRect(0, 0, 800, 600); } else { alert('เบราว์เซอร์ของคุณไม่รองรับ Canvas โปรดลองเปลี่ยนเบราว์เซอร์ ~ ') } }</script>การแสดงผล:
หลังจากที่เราสร้างตัวแปร linearGrad แล้ว เราก็สามารถเพิ่ม ColorStop และเพิ่มตัวแปรได้
ตัวอย่างเช่น:
รหัส:
var linearGrad = context.createLinearGradient(0, 0, 800, 600); // พิกัดเริ่มต้นของเส้นไล่ระดับสีคือ (0,0) และพิกัดสิ้นสุดคือ (800,600) linearGrad.addColorStop(0.0, '#fff') ; linearGrad.addColorStop(0.25, '#FB3'); '#690'); linearGrad.addColorStop(0.75, '#09C'); linearGrad.addColorStop(1.0, '#000');
การแสดงผล:
นอกจากนี้ เส้นไล่ระดับสีที่เรากำหนดไว้นั้นมีความเอียง และเรายังสามารถกำหนดให้เป็นแนวนอนหรือแนวตั้งก็ได้ เราจำเป็นต้องแก้ไขพิกัดสิ้นสุดของเส้นไล่ระดับสีเท่านั้น ดูโค้ดเพื่อสร้างการไล่ระดับสีแนวนอน:
var linearGrad = context.createLinearGradient(0, 0, 800, 0);
การแสดงผล:
สีไล่ระดับสีแนวตั้ง:
var linearGrad = context.createLinearGradient(0, 0, 800, 0);
การแสดงผล:
ไม่ว่าจะเอียงในแนวนอนหรือแนวตั้ง สิ่งที่เราทำจะไหลไปทั่วทั้งผืนผ้าใบ แล้วอะไรจะเกิดขึ้นหากเส้นไล่ระดับสีของเราถูกกำหนดให้กับส่วนหนึ่งของผืนผ้าใบเท่านั้น มาปรับเปลี่ยนกัน
var linearGrad = context.createLinearGradient (0, 0, 400, 300);
การแสดงผล:
ในทำนองเดียวกัน เส้นไล่ระดับสีที่เราสร้างสามารถเกินความกว้างและความสูงสูงสุดของผืนผ้าใบนี้ได้ มาปรับเปลี่ยนกัน
var linearGrad = context.createLinearGradient(-200, -100, 1,000, 800);
การแสดงผล:
นอกจากนี้ รูปร่างที่เติมไว้ที่เราวาดอาจไม่จำเป็นต้องใช้ทั่วทั้งผืนผ้าใบ เราสามารถปรับรูปร่างที่เรากำหนดได้ตามใจชอบ รูปร่างที่เติมนี้จะค้นหาสีเติมที่เหมาะสมบนเส้นไล่ระดับสีที่เรากำหนดไว้และเติมลงไป ตัวอย่างเช่น:
var linearGrad = context.createLinearGradient(-200, -100, 1,000, 800);
การแสดงผล:
การไล่ระดับสีแบบรัศมี: ความแตกต่างจากการไล่ระดับสีเชิงเส้นคือการไล่ระดับสีแบบรัศมีกำหนดการไล่ระดับสีแบบรัศมี การไล่ระดับสีในแนวรัศมีนี้ถูกกำหนดโดยพื้นฐานของวงกลมที่มีศูนย์กลางสองวงกลม ต่างจากการไล่ระดับสีเชิงเส้นซึ่งกำหนดไว้ระหว่างจุดสองจุด
การไล่ระดับสีแบบรัศมียังต้องมีสองขั้นตอนจึงจะเสร็จสมบูรณ์
ขั้นตอนที่ 1: ใช้ฟังก์ชันใหม่ createRadialGradient(x0,y0,r0,x1,y1,r1) เขามีพารามิเตอร์ 6 ตัว พารามิเตอร์สามตัวแรกกำหนดพิกัดและรัศมีของวงแหวนแรก และพารามิเตอร์สามตัวสุดท้ายกำหนดพิกัดและรัศมีของวงแหวนที่สอง การไล่ระดับสีในแนวรัศมีทั้งหมดเกิดขึ้นระหว่างวงกลมทั้งสองวงนี้ var radialGrad = context.createRadialGradient(x0,y0,r0,x1,y1,r1);
ขั้นตอนที่ 2: มันเหมือนกับการไล่ระดับสีเชิงเส้น ดังนั้นฉันจะไม่แนะนำมันโดยละเอียด radialGrad.addColorStop(หยุด,สี);
โค้ดนี้คล้ายกับโค้ดสำหรับการไล่ระดับสีเชิงเส้นมาก เป็นเพียงการใช้ createRadialGradient ที่นี่ เราส่งผ่านพารามิเตอร์ createRadialGradient(300,300,0,300,300,500) พารามิเตอร์สามตัวแรกกำหนดจุดด้วยรัศมี 0 ที่กึ่งกลางของผืนผ้าใบ พารามิเตอร์สามตัวสุดท้ายกำหนดวงกลมขนาดใหญ่ที่มีรัศมี 500 ตรงกลางผืนผ้าใบ สิ่งนี้กำหนดการไล่ระดับสีในแนวรัศมีที่แผ่ออกจากจุดหนึ่ง ลองดูที่รหัส
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA -เนื้อหาที่เข้ากันได้=ie=edge> <title>การไล่ระดับสีแบบรัศมี</title></head><body> <canvas id=canvas style=border: 1px solid #aaa;display:block;margin:0 auto></canvas></body></html><script> window.onload = function () { var canvas = document.getElementById(canvas); canvas.width = 600 ; canvas.height = 600; if (canvas.getContext(2d)) { var context = canvas.getContext(2d); var radialGrad = context.createRadialGradient(300, 300, 0, 300, 300, 500); radialGrad.addColorStop(0.0, '#fff'); radialGrad.addColorStop(0.25, '#FB3'); '); radialGrad.addColorStop(0.75, '#09C'); radialGrad.addColorStop(1.0, '#000'); context.fillStyle = radialGrad; context.fillRect(0, 0, 600, 600 } อื่น ๆ { การแจ้งเตือน ('คุณ เบราว์เซอร์ของคุณไม่รองรับ Canvas โปรดลองเปลี่ยนเบราว์เซอร์ของคุณ~') } }</script>การแสดงผล:
คุณสามารถลองเปลี่ยนพารามิเตอร์เพื่อดูว่าจะมีเอฟเฟกต์อะไรบ้าง
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network