HTML 5 キャンバス

HTML 5 Canvas

Canvas 要素は、Web ページ上にグラフィックを描画するために使用されます。

キャンバスとは何ですか?

HTML5 の Canvas 要素は、JavaScript を使用して Web ページ上に画像を描画します。

キャンバスは、すべてのピクセルを制御できる長方形の領域です。

キャンバスには、パス、長方形、円、文字を描画したり、画像を追加したりするための複数の方法があります。

キャンバス要素を作成する

キャンバス要素をHTML5ページに追加します。

要素の ID、幅、高さを指定します:

<canvas id="myCanvas" width="200" height="100"></canvas>

JavaScript で描画

Canvas 要素自体には描画機能がありません。すべての描画作業は JavaScript 内で行う必要があります:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript は id を使用してキャンバス要素を検索します:

var c=document.getElementById("myCanvas");

次に、コンテキストオブジェクトを作成します:

var cxt= c .getContext("2d");

getContext("2d") オブジェクトは、パス、四角形、円、文字を描画し、画像を追加するための複数のメソッドを備えた組み込みの HTML5 オブジェクトです。

次の 2 行のコードは赤い四角形を描画します。

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

fillStyle メソッドはそれを赤に染めます。形状、位置、サイズを指定します。

座標を理解する

上記の fillRect メソッドにはパラメータ (0,0,150,75) があります。

意味: キャンバス上に左上隅 (0,0) から開始して 150x75 の長方形を描画します。

下の画像に示すように、キャンバスの X 座標と Y 座標を使用して、キャンバス上に絵画を配置します。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css"> 
body
{
font-size:70%;
font-family:verdana,helvetica,arial,sans-serif;
}
</style>
<script type="text/javascript"> 
function cnvs_getCoordinates(e)
{
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}
function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}
</script>
</head>
<body style="margin:0px;">
<p>把鼠标悬停在下面的矩形上可以看到坐标：</p>
<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
<br />
<br />
<br />
<div id="xycoordinates"></div>
</body>
</html>

例 - 円

サイズ、色、位置を指定して円を描画します:

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#00ff00";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
</body>
</html>

canvas要素:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

例 - グラデーション

指定した色を使用してグラデーションの背景を描画します:

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
</body>
</html>

例 - 画像

画像をキャンバスに配置します:

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="http://image75.360doc.com/DownloadImg/2014/06/1301/42548176_7.jpg"
cxt.drawImage(img,0,0);
</script>
</body>
</html>

学び続ける

新しいファイル

<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#00ff00"; cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); </script> </body> </html>

提出するリセットコード

自動運転