HTML <canvas> elemen digunakan untuk menggambar grafik pada halaman web.
Apa itu HTML Canvas?
HTML <canvas> elemen digunakan untuk menggambar grafik, dengan cepat, melalui scripting (JavaScript biasanya).
The <canvas> elemen hanya wadah untuk grafis. Anda harus menggunakan script untuk menarik grafis.
Kanvas memiliki beberapa metode untuk menggambar jalan, kotak, lingkaran, teks, dan menambahkan gambar.
Contoh kanvas
Sebuah kanvas adalah area persegi pada halaman HTML. Secara default, kanvas tidak memiliki perbatasan dan tidak ada konten.
Markup terlihat seperti ini:
<canvas id="myCanvas width="170" height="100"></canvas>
Catatan: Selalu menentukan atribut id (yang akan disebut dalam naskah), dan lebar dan tinggi atribut untuk menentukan ukuran kanvas.
Untuk menambahkan border, gunakan atribut style:
<canvas id="myCanvas" width="170" height="100" style="border: 1px solid black;">
Menggambar dengan JavaScript
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillstyle = "#ff0000";
ctx.fillRect(0,0,150,75);
Menggambar Line
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
Menggambar Lingkaran
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Menggambar Teks
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
Stroke Teks
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
Menggambar Gradient Linear
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"White");
// Fill With gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
Menggambar Edaran Gradient
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"White");
// Fill With gradient
ctx.fillStyle = grd;
0 komentar:
Posting Komentar