JavaScript භාවිතයෙන් canvas හි රේඛා වර්ණය වෙනස් කිරීම

දැන් අපි සීමාව (contour) සහ පිරවුම් (fill) වර්ණය වෙනස් කරන ආකාරය ඉගෙන ගනිමු. මේ සඳහා පහත ගුණාංග ඇත: 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 ගුණාංගයේ අගය නැවත සකසා ගත යුතුය.

ප්‍රායෝගික කාර්යයන්