情報学部 菅沼ホーム HTML 目次 索引

CANVAS 要素

　　図形を描く

［カテゴリー］

［要素を使用できる文脈］

［コンテンツモデル］

［コンテンツ属性］

［DOM インタフェース］ 
interface HTMLCanvasElement : HTMLElement {
           attribute unsigned long width;
           attribute unsigned long height;

  DOMString toDataURL(optional DOMString type, any... arguments);
  DOMString toDataURLHD(optional DOMString type, any... arguments);
  void toBlob(FileCallback? _callback, optional DOMString type, any... arguments);
  void toBlobHD(FileCallback? _callback, optional DOMString type, any... arguments);

  object? getContext(DOMString contextId, any... arguments);
  boolean supportsContext(DOMString contextId, any... arguments);
};
［使用例］　例えば，CANVAS 要素を使用して，以下に示すような図を描いたり，アニメーションを作成することが可能です．しかし，これを実現するためには，以下に示すソースコードからも明らかなように，JavaScript 等に関する知識が必要です．他のコンテンツ（「 JavaScript と C/C++ 」等）または書物を参照して下さい．

描画の例（中央の円が表示されない場合は，再読み込みをしてみて下さい）

<!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>CANVAS の例（描画）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 420;   // キャンバス要素の幅
			canvas.height = 140;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 矩形を描く
			ctx.beginPath();
			ctx.moveTo(20, 20);
			ctx.lineTo(120, 20);
			ctx.lineTo(120, 120);
			ctx.lineTo(20, 120);
			ctx.closePath();
			ctx.stroke();
					// 円を描く
			ctx.beginPath();
			ctx.arc(70, 70, 40, 0, 2*Math.PI, false);
			ctx.stroke();
					// 外部画像を描く
			let img = new Image();
			img.src = "../ball.gif";
			ctx.drawImage(img, 170, 30);
					// ピクセル値の操作
			let wid = 80;
			let hei = 80;
			let im  = ctx.createImageData(wid, hei);
			for (let i1 = 0; i1 < hei/2; i1++) {
				for (let i2 = 0; i2 < wid; i2++) {
					let k = 4 * (wid * i1 + i2);
					im.data[k]   = 0x00;
					im.data[k+1] = 0xff;
					im.data[k+2] = 0x00;
					im.data[k+3] = 0xff;   // 透明度
				}
			}
			for (let i1 = hei/2; i1 < hei; i1++) {
				for (let i2 = 0; i2 < wid; i2++) {
					let k = 4 * (wid * i1 + i2);
					im.data[k]   = 0x00;
					im.data[k+1] = 0x00;
					im.data[k+2] = 0xff;
					im.data[k+3] = 0xff;   // 透明度
				}
			}
			ctx.putImageData(im, 310, 30);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>簡単な描画</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="420" HEIGHT="140"></CANVAS>
</BODY>
</HTML>

アニメーションの例

<!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>アニメーション（ setInterval ）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../master.css">
	<SCRIPT TYPE="text/javascript">
		count1  = 0;   // 10 個の円を描くためのカウンタ
		count2  = 0;   // 5 回繰り返すためのカウンタ
		r       = 10;   // 円の半径の初期値
		canvas  = null;
		ctx     = null;
		timerID = -1;
					// 開始
		function start()
		{
			canvas  = document.getElementById('canvas_e');   // キャンバス要素の取得
			ctx     = canvas.getContext('2d');   // キャンバスからコンテキストを取得
			timerID = setInterval('draw()',100);
		}
					// 描画
		function draw() {
			count1++;
			if (count1 > 10) {
				count2++;
				if (count2 > 4)
					stop();
				else {
					r      = 10;
					count1 = 1;
					ctx.clearRect(0, 0, canvas.width, canvas.height);
				}
			}
			ctx.beginPath();
			ctx.arc(0, 0, r, Math.PI*1.5, Math.PI*2, true);
			ctx.stroke();
			r = 1.5 * r;
		}
					// 停止
		function stop()
		{
			clearInterval(timerID);
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			timerID = -1;
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="eeffee" onLoad="start()">
	<H1>アニメーション（ setInterval ）</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #ffffff;" WIDTH="250" HEIGHT="150"></CANVAS>
</BODY>
</HTML>

情報学部 菅沼ホーム HTML 目次 索引