Rumah >hujung hadapan web >html tutorial >Teg Kanvas dalam HTML
Teg Kanvas dalam HTML
- WBOYasal
- 2024-09-04 16:27:39593semak imbas
Kanvas bermaksud melukis imej pada halaman penyemak imbas. Teg Kanvas dalam HTML ialah satu elemen sedemikian yang menyediakan HTML dengan permukaan peta bit, seperti kanvas kosong yang mengandungi peta piksel, yang mungkin mengandungi lebih daripada dua warna, untuk digunakan.
Pada mulanya, HTML tidak menyokong kanvas, tetapi kemudian HTML5 memperkenalkan ciri kanvas ini. Ini
Contoh Masa Nyata:Daripada menulis kod kendiri untuk melaksanakan grafik bagi setiap bentuk, ia akan menjadi beban berlebihan pada pemproses. Jadi untuk mengatasi situasi seperti ini, pembangun menghasilkan teg kanvas dalam HTML. Kurang kod boleh memberi kita bentuk animasi grafik yang tepat.
Sintaks
Ciri kanvas dalam HTML berfungsi dengan menggunakan
<canvas> //specify some properties inside canvas tag because different shape have different properties like width="" ,height="" , style=”” //code </canvas> <script> //script code for animations and graphics </script>
Contoh untuk Melaksanakan Teg Kanvas dalam HTML
Berikut ialah contoh:
Contoh #1
Bulatan di dalam segi empat tepat dengan Contoh Kanvas:
Kod:
<!DOCTYPE html>
<html>
<head>
<title>
Canvas in HTM5
</title>
<!--CSS Styles-->
<style>
h1
{
color: green;
text-align:center;
}
p
{
color:brown;
border: solid 2px blue;
font-size: 25px;
}
</style>
</head>
<body>
<h1>
Circle Shape inside Rectangle Shape
</h1>
<canvas id="rectangleCircle" width="300" height="200" style="border:2px solid red;">
</canvas>
<script>
var circle = document.getElementById("rectangleCircle");// with id drawing circle shape with script
var creatingCircle = circle.getContext("2d");//get the circle type from 2d shape
creatingCircle.beginPath();//circle shape begin
creatingCircle.arc(150,100,80,4,4*Math.PI);//circle x, y and size of the circle
creatingCircle.stroke();//stroke of the circle
</script>
</body>
</html>
Output:
Contoh #2
Teks dalam bentuk bulatan dengan Contoh Kanvas:
Kod:
/strong><!DOCTYPE html>
<html>
<head>
<title>
Canvas in HTM5
</title>
<!--CSS Styles-->
<style>
h1
{
color: red;
text-align:center;
}
p
{
color:green;
border: solid 2px maroon;
font-size: 25px;
}
</style>
</head>
<body>
<h1>
Text Inside the Circle Shape
</h1>
<canvas id="rectangleCircle" width="300" height="200" style="border:2px solid navy;">
</canvas>
<script>
var circle = document.getElementById("rectangleCircle");// with id drawing circle shape with script
var creatingCircle = circle.getContext("2d");//get the circle type from 2d shape
creatingCircle.beginPath();//circle shape begin
creatingCircle.arc(150,100,100,4,4*Math.PI);//circle x, y and size of the circle
creatingCircle.stroke();//stroke of the circle
creatingCircle.font = "30px Arial";//Creating a font
creatingCircle.strokeText("EDUCBA",100,90);// Creating text inside the circle
</script>
</body>
</html>
Output:
Contoh #3
Lukis garisan dengan Contoh Kanvas:
Kod:
<!DOCTYPE html>
<html>
<head>
<title>
Canvas in HTM5
</title>
<!--CSS Styles-->
<style>
h1
{
color: blue;
text-align:center;
}
p
{
color:red;
border: solid 2px orange;
font-size: 25px;
}
</style>
</head>
<body>
<h1>
Draw the Line with Canvas
</h1>
<canvas id="lineID" width="400" height="400" style="border:2px solid orange;">
</canvas>
<script>
var line = document.getElementById("lineID");// with id drawing line shape with script
var lineCreate = line.getContext("2d");//get the line type from 2d shape
lineCreate.moveTo(0,0);//move the line
lineCreate.lineTo(400,400);//Where to where line has to move
lineCreate.stroke();//line stroke
</script>
</body>
</html>
Output:
Contoh #4
Bentuk segitiga dengan Contoh Kanvas:
Kod:
<!DOCTYPE html>
<html>
<head>
<title>
Canvas in HTM5
</title>
<!--CSS Styles-->
<style>
h1
{
color: fuchsia;
text-align:center;
}
p
{
color:blue;
border: solid 2px skyblue;
font-size: 25px;
}
</style>
</head>
<body>
<h1>
Triangle Shape with Canvas
</h1>
<canvas id="triangleID" width="300" height="300" style="border:2px solid skyblue;">
</canvas>
<script>
var canvas = document.getElementById('triangleID');// with id drawing traingles shape with script
if (canvas.getContext)
{
var traingle = canvas.getContext('2d');//get the traingels type from 2d shape
//Creating the traingle
traingle.beginPath();
traingle.moveTo(25,25);
traingle.lineTo(105,25);
traingle.lineTo(25,105);
traingle.fill();
// Triangle can be stroked with below fuctions
traingle.beginPath();
traingle.moveTo(125,125);
traingle.lineTo(125,45);
traingle.lineTo(45,125);
traingle.closePath();
traingle.stroke();
} else
{
alert('Your browser does ot support this feature');//alert the user
document.write('Your browser does ot support this feature');//display the output
}
</script>
</body>
</html>
Output:
Kesimpulan
Teg kanvas diperkenalkan dalam versi HTML5. Kedua-dua kanvas dan kod JavaScript memberikan anda bentuk yang tepat untuk dilukis dengan teg kanvas. Kita boleh melukis bulatan, segi empat tepat, garisan, bentuk segi tiga dsb.
Atas ialah kandungan terperinci Teg Kanvas dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!