Kanvas HTML

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 ) ialah elemen HTML yang digunakan untuk melukis grafik (garisan, bar, graf, dll.) pada skrin komputer pengguna dengan cepat. Elemen kanvas hanyalah bekas untuk maklumat, walaupun; lukisan dilakukan melalui JavaScript. Ia disokong oleh semua pelayar web moden yang menyokong HTML5 dan boleh menghasilkan JavaScript. Mencipta kanvas HTML adalah sangat mudah dan anda boleh menambahkannya pada mana-mana halaman HTML melalui yang berikut.

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:

<style>
#examplecanvas{border:2px solid green;}
</style>


<canvas id="examplecanvas" width="500" height="300"></canvas>

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:

<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>


<canvas id="examplecanvas" width="400" height="300"></canvas>

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:

<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>


<canvas id="examplecanvas" width="500" height="300"></canvas>

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:

<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>


<canvas id="examplecanvas" width="500" height="200"></canvas>

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:

<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>


<canvas id="examplecanvas" width="600" height="400"></canvas>

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:

<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>

Output:

Begitu juga, kaedah melukis kecerunan bulat ialah createRadialGradient().

Sintaks:

var gradient = context.createRadialGradient(startX, startY, startingRadius, endX, endY, endingRadius);

Kod:

<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>

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!