<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
Langkah-langkah untuk <!-- menggambar: Dapatkan elemen kanvas - > dapatkan konteks - > isi dan gambar batas - > atur gaya gambar - >
<!-- menggambar grafik kompleks lainnya membutuhkan jalur: Mulai Membuat Jalur - > Buat Jalur Gambar - > Tutup Jalur - > Grafik Gambar - >
<!--mis: Menggambar persegi panjang - >
Gambar persegi panjang: <canvas id="ca"></canvas><br/>
Gambar lingkaran: <canvas id="yuan"></canvas>
</body>
</html>
<scrip{filter}t>
Menggambar persegi panjang
fungsi draw(){
var canvas=document.getElementById('ca'); Dapatkan elemen kanvas
if (canvas==null)
mengembalikan false;
var context=canvas.getContext('2d'); Dapatkan konteks
context.fillStyle='#EEEFF'; Warna isian
konteks.isianRect(0,0,400,300); Isi Persegi Panjang (Persegi Panjang 1)
context.fillStyle='merah';
context.strokeStyle='biru'; Warna batas
konteks.garisLebar=1; Lebar bingkai cincin
context.fillRect(50,50,100,100); Isi Persegi Panjang (Persegi Panjang Dalam 2)
konteks.strokeRect(50,50,100,100); Gambar perbatasan
}
Menggambar lingkaran
fungsi drawarc(){
var canvas2=document.getElementById('yuan'); Dapatkan elemen kanvas
if (canvas2==null)
jika(kanvas2==nol)
mengembalikan false;
var context2=canvas2.getContext('2d'); Dapatkan konteks
context2.fillStyle='#EEEEEF';
konteks2.isiRect(0,0,400,300);
var n = 0;
for(var i=0; i<10; i++){
context2.beginPath(); Mulai membuat jalur
konteks2.busur(i*25,i*25,i*10,0,Matematika.PI*2,benar); Membuat jalur melingkar
context2.closePath(); Tutup jalan setapak
context2.fillStyle='Rgba(255,0,0,0.25)'; Atur warna
konteks2.isian(); Isi grafik
}
}
</scrip{filter}t>
|
Diposting pada 14/12/2018 16.41.58
|
|
|
|
Diposting pada 14/12/2018 17.18.19
|
Diposting pada 14/12/2018 17.37.03
|
