Canvas HTML5

Elemen canvas digunakan untuk menggambar grafik di halaman web.

Apa itu Canvas?

Elemen canvas HTML5 menggunakan JavaScript untuk menggambar gambar di halaman web.

Kanvas adalah area persegi, Anda dapat mengendalikan setiap pixelnya.

Canvas memiliki berbagai metode penggambaran jalur, persegi, lingkaran, karakter serta menambahkan gambar.

Buat elemen Canvas

Tambahkan elemen canvas ke halaman HTML5.

Tentukan id elemen, lebar dan tinggi:

<canvas id="myCanvas" width="200" height="100"></canvas>

Menggambar melalui JavaScript

Elemen canvas sendiri tidak memiliki kemampuan pengeritahan. Semua kerja pengeritahan harus diselesaikan di dalam 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 menggunakan id untuk mencari elemen canvas:

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

然后，创建 context 对象：

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

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

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

fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

理解坐标

上面的 fillRect 方法拥有参数 (0,0,150,75)。

意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。

Contoh Canvas: Memahami Koordinat

实例：把鼠标悬停在矩形上可以看到坐标

更多 Canvas 实例

下面的在 canvas 元素上进行绘画的更多实例：

实例 - 线条

通过指定从何处开始，在何处结束，来绘制一条线：

Contoh Canvas: Garis

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>

亲自试一试

实例 - 圆形

通过规定尺寸、颜色和位置，来绘制一个圆：

Contoh Canvas: Bulatan

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>

亲自试一试

实例 - 渐变

使用您指定的颜色来绘制渐变背景：

Contoh Canvas: Gradasi

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>

亲自试一试

实例 - 图像

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

Contoh Canvas: Gambar

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 对象