masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

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.

Memahami koordinat

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

Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492784 permainan