キャンバスとは、ブラウザ ページ上に畫像を描畫することを意味します。 HTML の Canvas タグは、HTML にビットマップ サーフェス (3 色以上を含む可能性のあるピクセルのマップで構(gòu)成される空白のキャンバス) を提供する要素の 1 つです。 要素は、JavaScript などのスクリプト言語を使用して Web ページ上にグラフィカル イメージを作成するために使用されます。 要素は、グラフィックスのコンテナーなど、作業(yè)する空のキャンバスを作成しますが、グラフィックスや畫像などを描畫する実際の作成には JavaScript を使用する必要があります。
當(dāng)初、HTML はキャンバスをサポートしていませんでしたが、その後 HTML5 にこのキャンバス機(jī)能が導(dǎo)入されました。この<キャンバス> HTML5 の タグは、JavaScript スクリプトを使用してグラフィックを描畫するために使用されます。この Canvas タグを使用して畫像を描畫することもできます。キャンバス要素を美しくするには、アニメーション、グラフィックス、寫真操作、データ視覚化を使用できます。このキャンバス機(jī)能は、最初は Apple 社を通じて Web Kit に導(dǎo)入されました。
リアルタイムの例:すべての形狀にグラフィックスを?qū)g裝するためのスタンドアロン コードを作成する代わりに、プロセッサに過負(fù)荷がかかります。このような狀況を克服するために、開発者は HTML で Canvas タグを考案します。コードを少なくすることで、正確なグラフィック アニメーションの形狀を得ることができます。
構(gòu)文
HTML のキャンバス機(jī)能は
<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 で Canvas タグを?qū)g裝する例
これが例です:
例 #1
キャンバスを使用した四角形內(nèi)の円の例:
コード:
<!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>
出力:
例 #2
キャンバスを使用した?jī)倚蝺?nèi)のテキストの例:
コード:
/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>
出力:
例 #3
キャンバスで線を描く例:
コード:
<!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>
出力:
例 #4
キャンバスを使用した三角形の例:
コード:
<!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é)論
canvas タグは HTML5 バージョンで導(dǎo)入されました。 Canvas と JavaScript コードの両方により、canvas タグを使用して正確な形狀を描畫できます。円、長(zhǎng)方形、線、三角形などを描くことができます。
以上がHTMLのキャンバスタグの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。