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