Canvas 是指在瀏覽器頁(yè)面上繪製影像。 HTML 中的 Canvas 標(biāo)籤就是這樣一種元素，它為 HTML 提供點(diǎn)陣圖表面，就像由像素圖組成的空白畫(huà)布，可能包含兩種以上的顏色可供使用。 元素用於借助腳本語(yǔ)言（例如 JavaScript）在網(wǎng)頁(yè)上建立圖形圖像。 元素建立一個(gè)空白畫(huà)布來(lái)使用，就像圖形容器一樣，但您需要使用 javascript 進(jìn)行實(shí)際建立、繪製圖形、圖像等。
最初，HTML不支援canvas，但後來(lái)HTML5引進(jìn)了這個(gè)canvas功能。這個(gè) HTML5 中的標(biāo)籤用於透過(guò) JavaScript 腳本繪製圖形。我們也可以用這個(gè)canvas標(biāo)籤來(lái)繪製圖像。可以使用動(dòng)畫(huà)、圖形、照片處理、資料視覺(jué)化使畫(huà)布元素變得美觀。這項(xiàng)畫(huà)布功能最初是透過(guò) Apple 公司在 Web Kit 中引入的。
即時(shí)範(fàn)例：與其編寫(xiě)?yīng)毩⒊淌酱a來(lái)實(shí)現(xiàn)每個(gè)形狀的圖形，否則它將成為處理器的過(guò)載。因此，為了克服這種情況，開(kāi)發(fā)人員在 HTML 中提出了 canvas 標(biāo)籤。更少的程式碼可以給我們一個(gè)精確的圖形動(dòng)畫(huà)形狀。
文法
HTML 中的畫(huà)布功能是透過(guò)應(yīng)用
<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>
在 HTML 中實(shí)作 Canvas 標(biāo)籤的範(fàn)例
這是範(fàn)例：
範(fàn)例#1
矩形內(nèi)的圓形與畫(huà)布範(fàn)例：
?代碼：
<!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>
?輸出：
範(fàn)例#2
圓形內(nèi)的文字與畫(huà)布範(fàn)例：
代碼：
/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>
輸出：
範(fàn)例#3
用 Canvas 畫(huà)線範(fàn)例：
代碼：
<!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>
輸出：
範(fàn)例#4
畫(huà)布上的三角形範(fàn)例：
代碼：
<!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>
輸出：
?結(jié)論
HTML5版本中引入了canvas標(biāo)籤。 canvas 和 JavaScript 程式碼都可以提供您使用 canvas 標(biāo)籤繪製的準(zhǔn)確形狀。我們可以畫(huà)圓形、長(zhǎng)方形、直線、三角形等
以上是HTML 中的畫(huà)布標(biāo)籤的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！