Kuanza kutumia canvas katika JavaScript

Canvas ni uwanja maalum wa kuchora kwenye kivinjari kwa kutumia JavaScript. Uwanja huu hutengenezwa kwa kutumia kitambulisho <canvas>, ambacho inapaswa kubainisha upana na urefu:

html<canvas width="200" height="200"></canvas>

Ili kufanya kazi na uwanja huu kwa kutumia JavaScript kwanza tupate kiungo kwa kitambulisho hiki kwenye tofauti fulani:

javascriptlet canvas = document.querySelector('canvas');

Kisha kwa tofauti hii ni muhimu kutumia mtindo getContext:

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

Inaweza kurahisishwa:

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

Kwa matokeo, kwenye tofauti ctx itaandikwa kitu kilicho na kinachojulikana kama muktadha wa utekelezaji. Uchoraji wote utafanyika kwa kutumia mbinu za kitu hiki . Tutajifunza kuzichunguza katika masomo yafuatayo.