ホームページ > 記事 > ウェブフロントエンド > HTML5のCanvas要素
HTML5のCanvas要素
- 黄舟オリジナル
- 2016-12-22 15:27:151353ブラウズ
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 までご連絡ください。
前の記事：HTML5 のフォーム要素次の記事：HTML5 のフォーム要素