HTML5 Canvas
- ទៅចំណុចមុខ HTML Input អត្តបទទំរង់
- ទៅចំណុចបន្ទាប់ HTML5 SVG
Ang elemento ng canvas ay ginagamit upang magpipinta ng grapik sa web page.
Ano ang Canvas?
Ang elemento ng canvas ng HTML5 ay ginagamit ang JavaScript upang magpipinta ng imahe sa web page.
Ang buwan ay isang rectangular na lugar kung saan maaari mong kontrolin ang bawat pixel.
Ang canvas ay may maraming paraan sa pagpipinta ng landas, retangulo, bilog, teksto at pagdagan ng imahe.
Paglikha ng Element ng Canvas
Idinagdag ang element ng canvas sa pahina ng HTML5.
Tinutukoy ang id ng elemento, ang lapad at ang taas:
<canvas id="myCanvas" width="200" height="100"></canvas>
Pagpipinta sa pamamagitan ng JavaScript
Ang element ng canvas ay walang kakayahan sa pagpipinta. Lahat ng gawain sa pagpipinta ay dapat ginawa sa loob ng 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 gamit ang id upang hanapin ang element ng canvas:
var c=document.getElementById("myCanvas");
Pagkatapos, lumikha ng objekto na context:
var cxt=c.getContext("2d");
Ang objekto na getContext("2d") ay isang nakalalim na HTML5 na objekto na may maraming paraan upang magpahintulot ng pagpipinta ng daan, paranggola, bilog, teksto at pagdagdag ng imahe.
Ang mga sumusunod na linya ng kodigo ay magpipinta ng isang paranggola na pula:
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
Ang paraan na fillStyle ay magpapakulay ng pula, ang fillRect ay nagtutukoy sa hugis, posisyon at sukat.
Pag-unawa sa Koordinado
Ang gumamit ng paraan na fillRect ay may argumento (0,0,150,75).
Ang kahulugan ay: Magpahintulot ng pagpipinta ng paranggola na may sukat na 150x75 mula sa tapat na itaas (0,0).
Tulad ng ibabaw, ang X at Y na koordinado ng canvas ay ginagamit upang lokalisahin ang pagpipinta sa loob ng canvas.
Mga halimbawa: Makita ang koordinado sa loob ng paranggola kapag inihintay ang mouse
Mga mas maraming halimbawa ng Canvas
Mga mas maraming halimbawa ng pagpipinta sa elementong canvas:
Mga halimbawa - Linya
Sa pamamagitan ng pagtutukoy sa mula saan at saan ito magtatapos, magpahintulot ng pagpipinta ng isang linya:
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>
អត្តបទសារ:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> ម៉ាសកម្មរបស់អ្នកមិនគាំទ្រ HTML5 អត្តបទសារ. </canvas>
Mga halimbawa - Bilog
Sa pamamagitan ng pagtutukoy sa sukat, kulay at posisyon, magpahintulot ng pagpipinta ng isang bilog:
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>
អត្តបទសារ:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> ម៉ាសកម្មរបស់អ្នកមិនគាំទ្រ HTML5 អត្តបទសារ. </canvas>
Mga halimbawa - Kalapit na likuran
Gamit ang iyong pinagmumunuan na kulay upang magpahintulot ng pagpipinta ng kalapit na likuran:
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>
អត្តបទសារ:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> ម៉ាសកម្មរបស់អ្នកមិនគាំទ្រ HTML5 អត្តបទសារ. </canvas>
ឧទាហរណ៍ - រូបភាព
ដាក់រូបភាពមួយទៅគំនូរសឺរី:
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>
អត្តបទសារ:
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"> ម៉ាសកម្មរបស់អ្នកមិនគាំទ្រ HTML5 canvas សញ្ញា. </canvas>
HTML Canvas ការបង្រៀន
សំរាប់រៀនពីចំណេញអំពីគំនូរសឺរីដែលប្រហែលខ្លះ សូមចូលទៅកាន់ HTML Canvas ការបង្រៀន.
- ទៅចំណុចមុខ HTML Input អត្តបទទំរង់
- ទៅចំណុចបន្ទាប់ HTML5 SVG
