Latest web development tutorials

HTML5 Canvas

<Canvas> grafis tag kustom, seperti grafik dan gambar lain, Anda harus menggunakan script untuk menggambar grafik.

Di kanvas (kanvas) menggambar persegi panjang merah, persegi panjang gradien, persegi panjang berwarna, dan beberapa teks berwarna.

Browser Anda tidak mendukung HTML5 <canvas> elemen.

Apa Canvas?

HTML5 <canvas> elemen digunakan untuk menggambar grafik menggunakan scripting (biasanya JavaScript) untuk menyelesaikan.

<Canvas> tag adalah wadah grafis, Anda harus menggunakan script untuk menggambar grafik.

Anda dapat menggunakan Canva menggambar jalur, kotak, lingkaran, karakter, dan menambahkan gambar melalui berbagai metode.


Dukungan Browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9 +, Firefox, Opera, Chrome, dan dukungan Safari <canvas> elemen.

Catatan: Internet Explorer 8 dan versi sebelumnya dari browser IE tidak mendukung <canvas> elemen.


Buat kanvas (kanvas)

Sebuah halaman kanvas adalah persegi panjang ditarik melalui <canvas> elemen.

Catatan: Secara default, <canvas> elemen memiliki perbatasan dan konten.

<Canvas> Contoh sederhana adalah sebagai berikut:

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

Catatan: Label biasanya perlu menentukan atribut id (script sering dikutip), ukuran, lebar dan tinggi atribut menentukan kanvas.

Tip: Anda dapat menggunakan beberapa <canvas> elemen dalam halaman HTML.

Menggunakan atribut style menambahkan perbatasan:

contoh

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

Coba »


Gunakan JavaScript untuk menggambar grafik

kanvas elemen itu sendiri tidak mengambil daya. Semua pekerjaan harus ditarik dalam JavaScript dilakukan secara internal:

contoh

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

Coba »

contoh analisis:

Pertama, menemukan <canvas> elemen:

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

Kemudian, membuat objek konteks:

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

getContext ( "2d") objek adalah built-in HTML5 objek memiliki beberapa metode untuk menggambar jalan, kotak, lingkaran, karakter, dan menambahkan gambar.

Berikut dua baris kode untuk menggambar persegi panjang merah:

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

Pengaturan properti fillStyle bisa menjadi warna CSS, gradien, atau pola. Pengaturan standar fillStyle adalah # 000000 (hitam).

fillRect (x, y, lebar,tinggi) metode mendefinisikan sebuah persegi panjang diisi dengan metode saat ini.


koordinat kanvas

kanvas adalah grid dua dimensi.

kanvas atas koordinat sudut kiri (0,0)

Metode di atas memiliki parameter fillRect (0,0,150,75).

Ini berarti: Menggambar 150x75 persegi panjang di kanvas dari sudut kiri atas (0,0).

Contoh koordinat

Seperti ditunjukkan di bawah, X dan Y koordinat dari kanvas pada kanvas untuk penentuan posisi lukisan. Pergerakan persegi panjang mouse, koordinat lokasi display.

X
Y

Canvas - Jalur

Pada garis lukisan kanvas, kita akan menggunakan dua metode berikut:

  • moveTo(x, y) koordinat menentukan garis dimulai
  • lineTo(x, y) koordinat untuk mendefinisikan akhir baris

Menarik garis kita harus menggunakan "tinta" metode, seperti stroke ().

contoh

Menentukan mulai koordinat (0,0), dan koordinat akhir (200, 100) dan kemudian menggunakan metode stroke () untuk menarik garis:

Browser Anda tidak mendukung HTML5 <canvas> elemen.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

Coba »

Menggambar lingkaran di kanvas, kita akan menggunakan metode berikut:

  • arc (x, y, r, start, stop)

Bahkan, kami menggunakan pendekatan "tinta" ketika menggambar lingkaran, seperti stroke () atau mengisi ().

contoh

Gunakan busur () metode untuk menggambar sebuah lingkaran:

Browser Anda tidak mendukung HTML5 <canvas> elemen.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Coba »


Canvas - Teks

Gunakan kanvas untuk menggambar teks, sifat penting dan metode sebagai berikut:

  • Font - mendefinisikan font
  • fillText (teks, x, y)- Menggambar teks yang solid di atas kanvas
  • strokeText (teks, x, y)- menggambar di atas kanvas teks berongga

Gunakan fillText ():

contoh

Gunakan "Arial" font rendering teks 30px tinggi (padat) di kanvas:

Browser Anda tidak mendukung HTML5 <canvas> elemen.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

Coba »

Gunakan strokeText ():

contoh

Gunakan "Arial" font rendering teks 30px tinggi (berongga) di atas kanvas:

Browser Anda tidak mendukung HTML5 <canvas> elemen.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

Coba »


Canvas - Gradient

Gradient dapat diisi persegi panjang, lingkaran, garis, teks, dll, berbagai bentuk dapat menentukan berbagai warna.

Berikut adalah dua cara yang berbeda untuk mengatur Canvas Gradient:

  • createLinearGradient (x, y, x1,y1) - Buat gradien garis
  • createRadialGradient (x, y, r,x1, y1, r1) - Buat radial / melingkar gradien

Ketika kita menggunakan benda gradien, Anda harus menggunakan dua atau lebih berhenti warna.

addColorStop () metode untuk menentukan berhenti warna, penggunaan koordinat untuk menggambarkan parameter yang dapat 0-1.

Menggunakan Gradient pengaturan fillStyle atau strokeStyle nilai gradien, dan kemudian menggambar bentuk, seperti persegi panjang, teks, atau garis.

Gunakan createLinearGradient ():

contoh

Buat gradien linier. Gunakan gradien mengisi persegi panjang:

Browser Anda tidak mendukung HTML5 <canvas> elemen.

JavaScript:

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);

Coba »

Gunakan createRadialGradient ():

contoh

Buat radial / melingkar gradien. Gunakan mengisi gradien persegi panjang:

Browser Anda tidak mendukung HTML5 <canvas> elemen.

JavaScript:

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;
ctx.fillRect(10,10,150,80);

Coba »


Canvas - Images

Satu gambar ke kanvas, menggunakan metode berikut:

  • drawImage(gambar, x, y)

Menggunakan gambar:

The Scream

contoh

gambar ditempatkan pada kanvas:

Browser Anda tidak mendukung HTML5 <canvas> elemen.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

Coba »


Pedoman HTML Canvas Referensi

properti lengkap dari label dapat merujuk pengguna Canvas referensi.

HTML <canvas> Tag

Tag 描述
<canvas> HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。