Canvas ya HTML5
- Picha ya Kwanza Matumizi ya Tovuti ya Input ya HTML
- Picha ya Kina HTML5 SVG
Element ya canvas inaonyesha uchora kwenye wavuti.
Nini ni Canvas?
Element ya canvas ya HTML5 inaona picha kwenye ukurasa wa wavuti kwa JavaScript.
Makao yako ni eneo la ukirekebishi, unaweza kusimamia kila pixel.
Canvas inaoshughulikia njia mbalimbali za uchora, ukirekebisha, kikurungu, herufi na kuongeza picha.
Kuundwa element ya Canvas:
Kuongeza element ya canvas kwenye ukurasa wa HTML5.
Inaonyesha id ya element, upakano na upekee wa kina:
<canvas id="myCanvas" width="200" height="100"></canvas>
Kuwaonyesha kwa JavaScript:
Element ya canvas yanaoshughulikia uharibifu wa uchora. Mawasiliano yote ya uchora lazima yishughuliwe kwenye JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript inaona id kuwaonyesha element ya canvas:
var c=document.getElementById("myCanvas");
Kisha, tumia mti wa kuingia kwenye kati ya katinga:
var cxt=c.getContext("2d");
Mtu wa kuingia kwenye kati ya katinga wa "2d" ni mti wa HTML5 wa kijana, na wenzote wengi wa uendeshaji wa mizingu, mraba, kikuu, herufi na kuingia kwenye picha.
Mabomu ya kuingia kwenye kati ya katinga hizi inaonyesha kuingia kwenye kati ya kichwa kichari:
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
Method ya fillStyle inaonyesha kwa kichwa, method ya fillRect inaonyesha kati, uko na ukubadilisha.
Kuelewa koordinati
Kitu kidogo cha kuingia kwenye kati ya katinga kina ukuruhusu (0,0,150,75).
Inamtaarika kwamba kuingia kwenye kati ya kizingo inaonekana kama 150x75, kuanza kutoka kwenye kati ya kati ya kuingia kwenye kati ya katinga (0,0).
Kama itakuwa inonyeshwa, koordinati ya X na Y ya kati inatumiwa kuwa kuingia kwenye kati ya kizingo kuingia kwenye kizingo.
Mifano: Wapea kwenye rafiki ya mraba huzo inafikia koordinati
Mifano zaidi za Canvas
Mifano zaidi za kuingia kwenye element ya canvas:
Mifano - Misingu wa joto
Tumia kuzingatia kuanza na kutoweka kuwa kuiweza kuwa mizingu:
Kipindi cha JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
Hisia ya canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Mifaa yako hauzungumza hisia ya canvas. </canvas>
Mifano - Kikuu
Tumia ukuruhusu ukubadilisha ukiripoti, rangi na uko wa kuzingatia kuiweza kuwa mizingu:
Kipindi cha JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
Hisia ya canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Mifaa yako hauzungumza hisia ya canvas. </canvas>
Mifano - Mizingu wa mbili
Tumia mifano wako ambao unavyoa kuwa mizingu wa mbili:
Kipindi cha JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
Hisia ya canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Mifaa yako hauzungumza hisia ya canvas. </canvas>
Mfano - Picha
Piga kuweka picha kwenye kichwa cha maombi:
Kipindi cha JavaScript:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
</script>
Hisia ya canvas:
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"> Mifaa yako hauzungumza kitu cha HTML5 canvas. </canvas>
Mafunzo ya Canvas ya HTML
Kwa sababu ya kusoma zaidi kuhusu canvas, tafuta tovuti yetu Mafunzo ya Canvas ya HTML.
Picha za Kina
Kitabu cha Mifano:Titi ya <canvas> ya HTML5
Kitabu cha Mifano:Mfano wa Hisia ya DOM Canvas ya HTML
- Picha ya Kwanza Matumizi ya Tovuti ya Input ya HTML
- Picha ya Kina HTML5 SVG
