HTML5 Canvas

Ginagamit ang elemento ng canvas upang magpipinta ng grapik sa web page.

Ano ang Canvas?

Ang elemento ng canvas ng HTML5 ay gumagamit ng JavaScript upang magpipinta ng imahe sa web page.

Ang guhit ay isang rectangular na lugar, na mapipigil mo ang bawat pixel.

Mayroon ang canvas ng iba't ibang paraan sa pagpipinta ng landas, parihaba, bilog, teksto at pagdagdag ng imahe.

Paglikha ng Elementong Canvas

Idinagdag ang elemento 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

Wala ang paggamit ng kapangyarihan sa pagpipinta ang elementong canvas. Ang lahat ng ginagawa sa pagpipinta ay dapat gawin 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 ay gumagamit ng id upang maghanap ng elementong canvas:

var c=document.getElementById("myCanvas");

Pagkatapos, lumikha ng objekto na context:

var cxt=c.getContext("2d");

Ang objekto na getContext("2d") ay isang nakalipas na HTML5 na objekto na may maraming paraan upang magpahintulot ng pagpipinta ng mga daan, parihaba, bilog, teksto at magdagdag ng imahe.

Ang mga linya ng kodigo sa ibaba ay nagpipinta ng isang parihaba na pula:

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

Ang paraan na fillStyle ay nagpapalubog sa pula, ang fillRect ay nagtutukoy sa hugis, posisyon at sukat.

Pag-unawa sa Koordinada

Ang gumamit ng paraan na fillRect ay may mga argumento (0,0,150,75).

Ang kahulugan nito ay: Magpipinta ng parihaba na 150x75 sa kanluran at itaas na sulok (0,0).

Tulad ng ibabaw, ang X at Y na koordinada ng canvas ay ginagamit upang lokalisahin ang pagpipinta sa loob ng canvas.

Canvas ឧទ្ទាម័យ: អ្នកយល់ការដាក់តំរង

Mga halimbawa: Makikita ang koordinada kapag napalapit ang mouse sa parihaba

Higit pang Mga Halimbawa ng Canvas

Higit pang mga halimbawa ng pagpipinta sa elemenyo ng canvas:

Mga halimbawa - Linya

Sa pamamagitan ng pagtutukoy sa pagsisimula at pagtatapos, magpahintulot ng pagpipinta ng isang linya:

Canvas ឧទ្ទាម័យ: ខ្សែរបស់

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 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 canvas 元素。
</canvas>

亲自试一试

Mga halimbawa - Bilog

Sa pamamagitan ng pagtutukoy sa sukat, kulay at posisyon, magpahintulot ng pagpipinta ng isang bilog:

Canvas ឧទ្ទាម័យ: រង្វង់

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 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 canvas 元素。
</canvas>

亲自试一试

Mga halimbawa - Pagbabagong kulay

Gamit ang iyong tinukoy na kulay upang magpahintulot ng pagpipinta ng pagbabagong kulay sa likuran:

Canvas ឧទ្ទាម័យ: ការប្រែប្រួល

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 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 canvas 元素。
</canvas>

亲自试一试

实例 - 图像

把一幅图像放置到画布上：

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 元素：

<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

亲自试一试

HTML Canvas 教程

如需学习有关画布的更多知识，请访问我们的 HTML Canvas 教程。

相关页面

参考手册：HTML 5 <canvas> 标签

参考手册：HTML DOM Canvas 对象