การเปลี่ยนสีเส้นใน canvas บน JavaScript

ตอนนี้เรามาเรียนรู้การเปลี่ยนสีเส้นขอบและสีพื้นภายในกัน สำหรับการนี้มีคุณสมบัติต่อไปนี้: คุณสมบัติ strokeStyle กำหนดสีเส้นขอบ และคุณสมบัติ fillStyle กำหนดสีพื้นภายใน สีถูกกำหนดในรูปแบบ CSS ปกติ

ตัวอย่าง

มาลองวาดเส้นขอบด้วย rect และกำหนดให้เป็นสีแดง:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 100);
ctx.strokeStyle = 'red';
ctx.stroke();

Результат:

ตัวอย่าง

มาลองวาดสี่เหลี่ยมด้วย rect และกำหนดพื้นเป็นสีเขียว:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'green';
ctx.fill();

Результат:

หมายเหตุ

สำคัญ: เมื่อคุณกำหนดค่า strokeStyle หรือ fillStyle ค่าใหม่จะถูกนำไปใช้ กับทุกวัตถุที่จะถูกวาด จากจุดนี้เป็นต้นไป สำหรับแต่ละวัตถุที่ คุณต้องการสีที่ต่างออกไป คุณจะต้องกำหนดค่า fillStyle หรือ strokeStyle ใหม่

แบบฝึกหัด