HTML 5 Kanvas
Kanvas HTML 5
Elemen kanvas digunakan untuk melukis grafik pada halaman web.
Apakah itu Kanvas?
Elemen kanvas HTML5 menggunakan JavaScript untuk melukis imej pada halaman web.
Kanvas ialah kawasan segi empat tepat yang anda boleh mengawal setiap piksel.
kanvas mempunyai banyak cara untuk melukis laluan, segi empat tepat, bulatan, aksara dan menambah imej.
Buat Elemen Kanvas
Tambahkan elemen kanvas pada halaman HTML5.
Menentukan id, lebar dan tinggi elemen:
<canvas id="myCanvas" width="200" height="100"></canvas>
Melukis melalui JavaScript
Elemen kanvas itu sendiri tidak mempunyai keupayaan lukisan. Semua kerja lukisan mesti dilakukan 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 kanvas:
var c=document.getElementById("myCanvas");
Kemudian, cipta objek konteks:
var cxt=c.getContext("2d");
getContext("2d") Objek ialah HTML5 terbina dalam objek yang mempunyai Pelbagai cara untuk melukis laluan, segi empat tepat, bulatan, aksara dan menambah imej.
Dua baris kod berikut melukis segi empat tepat merah:
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75); Kaedah 🎜>
fillStyle mewarnakannya dengan merah, dan kaedah fillRect menentukan bentuk, kedudukan dan saiz.
Kaedah fillRect di atas mempunyai parameter (0,0,150,75).
Bermaksud: Lukiskan segi empat tepat 150x75 pada kanvas, bermula dari sudut kiri atas (0,0).
Seperti yang ditunjukkan di bawah, koordinat X dan Y kanvas digunakan untuk meletakkan lukisan pada kanvas.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body
{
font-size:70%;
font-family:verdana,helvetica,arial,sans-serif;
}
</style>
<script type="text/javascript">
function cnvs_getCoordinates(e)
{
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}
function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}
</script>
</head>
<body style="margin:0px;">
<p>把鼠标悬停在下面的矩形上可以看到坐标：</p>
<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
<br />
<br />
<br />
<div id="xycoordinates"></div>
</body>
</html> Contoh - Bulatan Lukis bulatan dengan menyatakan saiz, warna dan kedudukan:
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#00ff00";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
</body>
</html>elemen kanvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>Contoh - Kecerunan
Lukis latar belakang kecerunan menggunakan warna yang anda tentukan:
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<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>
</body>
</html>Contoh - Imej
Letakkan imej ke dalam Pada kanvas:
rreeee
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
