HTML5 Canvas
- Halaman Sebelumnya Atribut Formulir Input HTML
- Halaman Berikutnya HTML5 SVG
Elemen canvas digunakan untuk menggambar grafik di halaman web.
Apakah 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 penggambar 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 menggambar. Semua kerja penggambar harus dilakukan 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 坐标用于在画布上对绘画进行定位。
更多 Canvas 实例
下面的在 canvas 元素上进行绘画的更多实例：
实例 - 线条
通过指定从何处开始，在何处结束，来绘制一条线：
Kode 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>
Elemen canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Browser Anda tidak mendukung elemen canvas. </canvas>
实例 - 圆形
通过规定尺寸、颜色和位置，来绘制一个圆：
Kode 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>
Elemen canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Browser Anda tidak mendukung elemen canvas. </canvas>
实例 - 渐变
使用您指定的颜色来绘制渐变背景：
Kode 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>
Elemen canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Browser Anda tidak mendukung elemen canvas. </canvas>
Contoh - Gambar
Tempatkan gambar di atas kanvas:
Kode 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>
Elemen canvas:
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"> Browser Anda tidak mendukung tanda HTML5 canvas. </canvas>
Panduan HTML Canvas
Untuk belajar lebih banyak tentang kanvas, silakan kunjungi Panduan HTML Canvas.
- Halaman Sebelumnya Atribut Formulir Input HTML
- Halaman Berikutnya HTML5 SVG
