Rectangulohoro az rӯи canvas dar JavaScript кашидан
Квадрат ва rectangulohoro ҳатман бо истифода аз комбинатсияҳои moveTo,
lineTo кашидан лозим нест -
барои ин методҳои содатар мавҷуданд.
Биёед онҳоро таҳлил кунем.
Усули strokeRect
Усули strokeRect(x, y, барашӣ,
баландӣ) дар нуқтаи додашуда контури
rectanguloro мекашад. Ду параметри якум координатҳои
нуқтаеро муайян мекунанд, ки гӯшаи болоии чапи
rectangulori кашидашуда дар он ҷойгир мешавад.
Биёед бо истифода аз strokeRect rectanguloro кашем
(фарз мекунем, ки ctx
аллакай мавҷуд аст):
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.strokeRect(50, 50, 100, 75);
:
Усули fillRect
Усули fillRect(x, y, барашӣ, баландӣ)
ҳамон тавр кор мекунад, ки strokeRect,
танҳо rectangulori рангирӣшударо мекашад.
Биёед бо мисол дида бароем:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 75);
:
Усули rect
Усули навбатии rect(x, y, барашӣ,
баландӣ) низ rectanguloro мекашад. Аммо
ин rectangulor фақат он гоҳ намоён мешавад,
ки усули stroke ё fill истифода шавад.
Дар ҳолати якум контур, дар ҳолати дуюм
- шакл хоҳад буд.
Биёед бо истифода аз 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, 75);
ctx.stroke();
:
Ва акнун шакл кашем:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.fill();
:
Усули clearRect
Усули навбатии clearRect(x, y,
барашӣ, баландӣ) монанди хокашӯ кор мекунад,
минтақаи rectangulshaklро пок карда,
муҳтавиро комилан ба заҳирӣ мегардонад.
Биёед бо истифода аз fillRect як квадрат кашем
ва қисми онро бо истифода аз clearRect пок кунем:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);
:
