Teg Kanvas dalam HTML-html tutorial-php.cn

Teg Kanvas dalam HTML

WBOY

Lepaskan： 2024-09-04 16:27:39

asal

551 orang telah melayarinya

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. elemen digunakan untuk mencipta imej grafik pada halaman web dengan bantuan bahasa skrip, seperti JavaScript. elemen mencipta kanvas kosong untuk digunakan, seperti bekas untuk grafik, tetapi anda perlu menggunakan javascript untuk penciptaan sebenar, melukis grafik, imej, dsb.

Pada mulanya, HTML tidak menyokong kanvas, tetapi kemudian HTML5 memperkenalkan ciri kanvas ini. Ini tag dalam HTML5 digunakan untuk melukis grafik dengan menggunakan skrip JavaScript. Kami juga boleh melukis imej dengan tag kanvas ini. Jadikan elemen kanvas cantik boleh menggunakan animasi, grafik, manipulasi foto, visualisasi data. Ciri kanvas ini pada mulanya diperkenalkan dalam Kit Web melalui Syarikat Apple.

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 teg dan skrip kepada pengguna memerlukan bentuk dengan grafik.

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

Salin selepas log masuk

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>

Salin selepas log masuk

Output:
Teg Kanvas dalam HTML

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>

Salin selepas log masuk

Output:

Teg Kanvas dalam HTML

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>

Salin selepas log masuk

Output:

Teg Kanvas dalam HTML

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>

Salin selepas log masuk

Output:

Teg Kanvas dalam HTML

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!