HTML5 Kanvas
<canvas></canvas> ialah teg baharu yang muncul dalam HTML5, seperti semua objek DOM, ia mempunyai sifat, kaedah dan peristiwanya sendiri, antaranya ialah kaedah lukisan, yang boleh dipanggil oleh js untuk. melukis.
Apakah itu Canvas?
elemen HTML5 <canvas> digunakan untuk melukis grafik, yang dilakukan melalui skrip (biasanya JavaScript
<canvas> hanya bekas Grafik, anda mesti menggunakan skrip untuk melukis grafik.
Anda boleh menggunakan Canva untuk melukis laluan, kotak, bulatan, aksara dan menambah imej dalam pelbagai cara.
Pada asasnya semua penyemak imbas menyokong elemen <kanvas> kecuali IE8 dan versi sebelumnya
Terdapat dua kaedah untuk melukis imej dengan elemen kanvas
context.fill()//Isi
context.stroke()//Lukis sempadan
gaya: Sebelum melukis grafik, tetapkan gaya lukisan
context.fillStyle//Isi gaya
konteks strokeStyle//Border style
?context.lineWidth//Lebar sempadan grafik
Perwakilan warna:
Gunakan nama warna secara langsung: "merah" "hijau" "biru"
Nilai warna heksadesimal: "#EEEEFF"
rgb(1-255, 1-255,1-255)
rgba(1-255,1-255,1-255, ketelusan)
Gunakan Kanvas Lukis garis lurus:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>php.cn</title>
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.moveTo(20,30);//第一個(gè)起點(diǎn)
cans.lineTo(120,90);//第二個(gè)點(diǎn)
cans.lineTo(220,60);//第三個(gè)點(diǎn)（以第二個(gè)點(diǎn)為起點(diǎn)）
cans.lineWidth=3;
cans.strokeStyle = 'red';
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>Koordinat Kanvas
kanvas ialah grid dua dimensi.
Koordinat sudut kiri atas kanvas ialah (0,0)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.fillStyle = 'yellow';
cans.fillRect(30,30,340,240);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>Nota: Kaedah digunakan di sini - fillRect(). , Lebar, Tinggi) , ini berbeza daripada koordinat dalam matematik X dan Y di sini bermula dari titik permulaan berbanding sudut kiri atas Kanvas. !
Pusingan
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.beginPath();
cans.arc(200,150,100,0,Math.PI*2,false);
cans.closePath();
cans.lineWidth = 5;
cans.strokeStyle = 'red';
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>Nota: Penggunaan kaedah lengkok di sini ialah lengkok(X,Y,Jejari,Sudut mula,sudut hujung,lawan arah jam), yang bermaksud (koordinat X pusat bulatan, koordinat Y pusat bulatan, jejari, sudut mula (radian), radian sudut hujung , sama ada mengikut Lukis mengikut arah jam);
Kanvas - Kecerunan
Kecerunan boleh mengisi segi empat tepat, bulatan , Garisan, teks, dsb., pelbagai bentuk boleh mempunyai warna berbeza yang ditakrifkan sendiri.
Terdapat dua cara berbeza untuk menetapkan kecerunan Kanvas:
createLinearGradient(x,y,x1,y1) - Buat kecerunan garis
createRadialGradient(x,y, r,x1,y1,r1) - Cipta kecerunan jejari/bulatan
Apabila kita menggunakan objek kecerunan, kita mesti menggunakan dua atau lebih warna hentian.
Kaedah addColorStop() menentukan hentian warna Parameter diterangkan mengikut koordinat, yang boleh menjadi 0 hingga 1.
Gunakan kecerunan, tetapkan nilai fillStyle atau strokeStyle kepada kecerunan, dan kemudian lukis bentuk, seperti segi empat tepat , teks atau garisan.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
var gnt1 = cans.createLinearGradient(10,0,390,0);
gnt1.addColorStop(0,'red');
gnt1.addColorStop(0.5,'green');
gnt1.addColorStop(1,'blue');
cans.fillStyle = gnt1;
cans.fillRect(10,10,380,280);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>Kanvas - teks
teks: teks yang akan dilukis
x: paksi koordinat-x bagi titik permulaan teks
y : paksi koordinat-y bagi titik permulaan teks
context.font: Tetapkan gaya fon
context.textAlign: penjajaran mendatar
mula, tamat, kanan, tengah
context.textBaseline: penjajaran menegak
atas, gantung, tengah, abjad, ideografi、 bawah
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
</head>
<style type="text/css">
body{margin:20px auto; padding:0; width:800px; }
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.font = 'bold 144px consolas';
cans.textAlign = 'left';
cans.textBaseline = 'top';
cans.strokeStyle = '#DF5326';
cans.strokeText('Hello', 100, 100);
cans.font = 'bold 144px arial';
cans.fillStyle = 'red';
cans.fillText('World', 300,300);
}
function img_click(){
var can = $$('can');
var cans = can.getContext('2d');
cans.clearRect(0,0,800,600);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="800px" height="600px" onclick="img_click(this);"></canvas>
</body>
</html>
