Utaratibu wa kumwita kwa Canvas ya HTML
Uchoraji kwenye kichwa cha kandakazi kwa JavaScript
Makao yote ya uchoraji kwenye kichwa cha HTML lazima yafanyishwe kwa JavaScript:
Mifano
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Tukio 1: Kuona elementi ya Canvas
Kwanza, inahitaji kuona elementi ya <canvas>:
Hii inayofanyika kwa kutumia mpangilio wa HTML DOM ya getElementById():
const canvas = document.getElementById("myCanvas");
Tukio 2: Kuanzisha kifaa cha kichwa cha kandakazi
Kisha, unahitaji kifaa cha kichwa cha kandakazi.
getContext() ni kifaa cha HTML chenye uwanja wa kifupi na viwango vya uchoraji:
const ctx = canvas.getContext("2d");
Tukio 3: Kuandaa picha kwenye kichwa cha kandakazi
Kisha, unaweza kuandaa picha kwenye kichwa cha kandakazi.
Kuweka mizingira wa kufupisha wa kijadili wa maelezo wa uchoraji:
ctx.fillStyle = "#FF0000";
Mwabali wa fillStyle inaweza kuwa rangi ya CSS, mawimbi ama maburugu. Mwabali wa fillStyle wa kuzingatia ni kijani.
metodi ya fillRect(x,y,kubwa cha kifupi,kubwa cha kifupi) ina kuandaa ukounda wa kichwa cha kandakazi, kwa ajili ya mizingira wa kufupisha:
ctx.fillRect(0, 0, 150, 75);
