Rumah >hujung hadapan web >html tutorial >Kanvas HTML
Kanvas HTML
- WBOYasal
- 2024-09-04 16:39:45913semak imbas
Artikel ini akan melihat garis besar pada Kanvas HTML; seperti yang anda sedia maklum, HTML ialah bahasa penanda. Untuk menyampaikan maklumat kepada pelawat, anda boleh menulis HTML dengan teks apa yang hendak ditunjukkan pada paparan dan cara ia akan dipaparkan, iaitu saiz fon, warna, orientasi, dll. Apabila ia datang untuk menambah visual pada halaman, anda dikehendaki memautkan dan benamkan imej pada halaman, yang disimpan secara berasingan daripada fail HTML pada hos anda.
Tetapi bagaimana jika anda perlu melukis sesuatu pada halaman?
Apakah HTML Canvas?
Kanvas HTML (digunakan melalui teg
Sintaks:
<canvas id="example" width="200" height="200"> <em>Content here</em> </canvas>
Anda boleh menentukan saiz kanvas melalui atribut lebar dan tinggi; ID elemen juga boleh ditakrifkan dalam teg, yang memungkinkan untuk menggunakan Gaya CSS pada elemen kanvas. Berikut ialah contoh cara anda boleh melukis segi empat tepat menggunakan elemen Kanvas:
Kod:
<html>
<head>
<style>
#examplecanvas{border:2px solid green;}
</style>
</head>
<body>
<canvas id = "examplecanvas" width = "500" height = "300"></canvas>
</body>
</html>
Output:
Contoh Lukisan Kanvas HTML
Sekarang anda telah melihat cara anda boleh melukis segi empat tepat menggunakan elemen kanvas, mari lihat beberapa objek lain yang boleh dilukis menggunakan elemen pada skrin output penyemak imbas.
1. Melukis Garisan pada Halaman
moveTo(), stroke() dan lineTo() ialah kaedah yang boleh digunakan untuk melukis garis lurus pada halaman web. Seperti yang anda boleh meneka, moveTo() memberitahu kedudukan curser ke dalam ruang elemen, dan lineTo() ialah kaedah yang memberitahu titik akhir baris. Strok() menjadikan garisan kelihatan. Berikut ialah kod untuk rujukan anda:
Kod:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas Line Example</title>
<style>
canvas {
border: 2px solid black;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.moveTo(10, 150);
context.lineTo(350, 100);
context.stroke();
};
</script>
</head>
<body>
<canvas id="examplecanvas" width="400" height="300"></canvas>
</body>
</html>
Output:
2. Melukis Bulatan pada Kanvas HTML
Tidak seperti segi empat tepat, tiada kaedah tertentu dalam JavaScript untuk melukis bulatan. Sebaliknya, kita boleh menggunakan kaedah arc(), yang digunakan untuk melukis lengkok untuk melukis bulatan dalam kanvas. Untuk mendapatkan kanvas dengan bulatan di atasnya, anda boleh menggunakan yang berikut:
Sintaks :
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
Berikut ialah contoh halaman dengan bulatan:
Kod:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas with a circle</title>
<style>
canvas {
border: 3px solid red;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(250, 150, 90, 0, 2 * Math.PI, false);
context.stroke();
};
</script>
</head>
<body>
<canvas id="examplecanvas" width="500" height="300"></canvas>
</body>
</html>
Output:
3. Melukis Teks dalam Kanvas HTML
Teks juga boleh dilukis dalam Kanvas HTML. Untuk mendapatkan teks pada kanvas anda, anda boleh menggunakan kaedah filltext(). Berikut ialah contoh halaman HTML yang mengandungi teks di dalam elemen kanvas:
Kod:
<html lang="en">
<head>
<meta charset="utf-8">
<title>canvas with text inside the element</title>
<style>
canvas {
border: 3px solid red;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.font = "bold 28px Arial";
context.fillText("This is text inside a canvas", 60, 100);
};
</script>
</head>
<body>
<canvas id="examplecanvas" width="500" height="200"></canvas>
</body>
</html>
Output:
4. Melukis arka Di Dalam Kanvas HTML
Seperti yang kita bincangkan dengan bulatan, terdapat kaedah yang dipanggil arc() yang digunakan untuk melukis arka di dalam HTML Canvas. Berikut ialah sintaks kaedah di mana anda hanya perlu menambah pembolehubah anda:
context.arc(centerX, centerY, radiusOfArc, startAngle, endAngle, counterclockwise);
Berikut ialah halaman HTML yang mempunyai arka di dalam elemen kanvas:
Kod:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Arc inside an HTML Canvas</title>
<style>
canvas {
border: 3px solid red;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(300, 300, 200, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
};
</script>
</head>
<body>
<canvas id="examplecanvas" width="600" height="400"></canvas>
</body>
</html>
Output:
5. Melukis Kecerunan Warna Linear atau Pekeliling
Anda boleh menggunakan kaedah ini untuk menciptaLienearGradient() untuk melukis kecerunan pilihan anda di dalam elemen kanvas. Dengan kaedah ini, anda perlu menggunakan addColorStop() untuk menandakan warna kecerunan.
Sintaks:
var gradient = context.createLinearGradient(startX, startY, endX, endY);
Berikut ialah halaman yang mempunyai kecerunan linear:
Kod:
<html>
<body>
<canvas id="examplecanvas" width="400" height="200" style="border:2px solid red;">
If you are seeing this. the browser does not support the HTML5 canvas.</canvas>
<script>
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createLinearGradient(0,0,200,0);
gradient.addColorStop(0,"green");
gradient.addColorStop(1,"red");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,300,150);
</script>
</body>
</html>
Output:
Begitu juga, kaedah melukis kecerunan bulat ialah createRadialGradient().
Sintaks:
var gradient = context.createRadialGradient(startX, startY, startingRadius, endX, endY, endingRadius);
Kod:
<html>
<body>
<canvas id="examplecanvas" width="200" height="100" style="border:2px solid red;">
If you are seeing this. the browser does not support the HTML5 canvas. </canvas>
<script>
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createRadialGradient(80,50,10,100,50,90);
gradient.addColorStop(0,"blue");
gradient.addColorStop(1,"yellow");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
Output:
Kesimpulan
Sekarang anda sudah biasa dengan apa itu dan cara ia boleh digunakan dalam halaman web, anda seharusnya berasa lebih yakin dengan kemahiran reka bentuk web anda. Walaupun imej boleh digunakan dalam beberapa kes, faedah kanvas HTML ialah ia boleh berskala dan lebih ringan dari segi saiz dan kuasa pemprosesan.
Atas ialah kandungan terperinci Kanvas HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!