HTML5のCanvas要素-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5のCanvas要素

黄舟

Dec 22, 2016 pm 03:27 PM

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

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

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

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

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

Canvas 要素を作成する

Canvas 要素を HTML 5 ページに追加し、要素の 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 を使用して Canvas 要素を検索します:

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

ログイン後にコピー

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

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

ログイン後にコピー

getContext("2d") オブジェクトは組み込みの HTML 5 ですパス、長方形、円、文字を描画したり、画像を追加したりするためのさまざまな方法を備えたオブジェクト。

例: 四角形の上にマウスを置くと、座標が表示されます。コードは次のとおりです。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body {
	margin: 0px;
	font-size: 70%;
	font-family: verdana, helvetica, arial, sans-serif;
}
#coordiv {
	float: left;
	width: 199px;
	height: 99px;
	border: 1px solid #c3c3c3
}
</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>
<p>把鼠标悬停在下面的矩形上可以看到坐标：</p>
<div id="coordiv" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
<div id="xycoordinates"></div>
</body>
</html>

ログイン後にコピー

上記は、HTML5 の Canvas 要素のコンテンツです。 PHP 中国語 Web サイト (www.php.cn) に注意してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。