การเปลี่ยนสีเส้นใน canvas บน JavaScript
ตอนนี้เรามาเรียนรู้การเปลี่ยนสีเส้นขอบและสีพื้นภายในกัน สำหรับการนี้มีคุณสมบัติต่อไปนี้:
คุณสมบัติ strokeStyle กำหนดสีเส้นขอบ และคุณสมบัติ fillStyle
กำหนดสีพื้นภายใน สีถูกกำหนดในรูปแบบ
CSS
ปกติ
ตัวอย่าง
มาลองวาดเส้นขอบด้วย rect
และกำหนดให้เป็นสีแดง:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 100);
ctx.strokeStyle = 'red';
ctx.stroke();
:
ตัวอย่าง
มาลองวาดสี่เหลี่ยมด้วย rect
และกำหนดพื้นเป็นสีเขียว:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'green';
ctx.fill();
:
หมายเหตุ
สำคัญ: เมื่อคุณกำหนดค่า strokeStyle
หรือ fillStyle ค่าใหม่จะถูกนำไปใช้
กับทุกวัตถุที่จะถูกวาด
จากจุดนี้เป็นต้นไป สำหรับแต่ละวัตถุที่
คุณต้องการสีที่ต่างออกไป คุณจะต้องกำหนดค่า
fillStyle หรือ strokeStyle ใหม่
