静岡理工科大学 菅沼ホーム JavaScript 目次 索引

DOM 及び CANVAS 関係の

JavaScript のプロパティとメソッド

  1. DOM（ Document Object Model ）

    　　DOM（ Document Object Model ）とは，ブラウザの機能，要素，属性などを構造化する方法を定めた仕様であり，これを使用して，HTML で記述されたドキュメントをプログラム（ここでは，JavaScript を使用）から操作し，ブラウザに動的な効果を与えることができます．HTML の各要素に対する説明の中に，「DOM インタフェース」という項目が現れます．例えば，IMG 要素の中には， 
    [NamedConstructor=Image(),
 NamedConstructor=Image(unsigned long width),
 NamedConstructor=Image(unsigned long width, unsigned long height)]
interface HTMLImageElement : HTMLElement {
           attribute DOMString alt;
           attribute DOMString src;
           attribute DOMString crossOrigin;
           attribute DOMString useMap;
           attribute boolean isMap;
           attribute unsigned long width;
           attribute unsigned long height;
  readonly attribute unsigned long naturalWidth;
  readonly attribute unsigned long naturalHeight;
  readonly attribute boolean complete;
};
    のような記述が現れるはずです．DOM インタフェースでは，要素の属性の内，どのような属性を参照，変更できるかを示しています．上に示した例では，10 個の属性の内，3 つは参照しかできませんが，他の属性に対してはその値を変更することが可能です．例えば，使用例（下に示すのが，そのソースコード）においては，IMG 要素の src 属性の値を変更することによって，画像をクリックする毎に表示画像を変更しています．また，「 DOM インタフェース」という文字列をクリックする毎に，文字色を変更しています． 
    <!DOCTYPE HTML>
<HTML>
	<HEAD>
		<TITLE>DOM インタフェース</TITLE>
		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
		<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
		<SCRIPT TYPE="text/javascript">
			sw1 = 0;
			sw2 = 0;

			function i_change()
			{
				switch (sw1) {
					case 0:
						document.getElementById("image").src = "sakura.gif";
						sw1 = 1;
						break;
					case 1:
						document.getElementById("image").src = "ajisai.gif";
						sw1 = 2;
						break;
					case 2:
						document.getElementById("image").src = "ayame.gif";
						sw1 = 0;
						break;
				}
			}

			function c_change()
			{
				if (sw2 == 0) {
					document.getElementById("DOM").style.color = "red";
					sw2 = 1;
				}
				else {
					document.getElementById("DOM").style.color = "black";
					sw2 = 0;
				}
			}
		</SCRIPT>
	</HEAD>
	<BODY CLASS="white">
		<P ID="DOM" CLASS="center" onClick="c_change()">DOM インタフェース</P>
		<DIV CLASS="center"><IMG SRC="ayame.gif" ID="image" onClick="i_change()"></DIV>
	</BODY>
</HTML>
    　　一般に，要素の属性値を参照・変更する場合は下に示した方法の 1 行目，また，スタイルシートのプロパティを参照・変更する場合は 2 行目のような方法で行います．なお，上に示したプログラムにおいて，getElementById("image") は， ID 属性が image である要素を返す DOM のメソッドです．
    要素.属性 [ = 属性値]   // 属性の場合
要素.style.プロパティ [ = 値]   // スタイルシートのプロパティの場合

    1. ［DOM のプロパティ］

      • className　　CLASS 属性の値（使用例１）

      • id　　ID 属性の値（使用例１）

      • innerHTML　　HTML 形式でコンテンツを書き出す（使用例２）

      • innerText　　テキスト形式でコンテンツを書き出す（使用例２）

      • lang　　LANG 属性の値（使用例１）

      • length　　要素数（使用例１）

      • outerHTML　　要素を抜けて，HTML 形式でコンテンツを書き出す（使用例２）

      • outerText　　要素を抜けて，テキスト形式でコンテンツを書き出す（使用例２）

      • tagName　　要素名（使用例１）

    2. ［DOM のメソッド］

      • addEventListener("イベントタイプ", 処理, ユーザキャプチャ)　　イベント処理の設定．3 番目の引数を true にするとイベントバブリング（子要素から親要素へイベントが伝わる）の前にイベントキャプチャリング（親要素から子要素に向けてイベントが伝わる）が起こる（使用例６）

      • appendChild("新ノード")　　子ノードの最後に新ノードを追加（使用例５）

      • createElement(tagName)　　tagName で指定された要素を生成（使用例５）

      • getAttribute("属性")　　要素の属性値（使用例３）

      • getAttributeNode("属性")　　ノードの指定した属性（使用例４）

      • getElementById("ID属性値")　　ID 属性値によって要素を特定（使用例１，使用例３）

      • getElementsByTagName("要素名")　　要素名によって要素を特定（使用例１）

      • hasAttribute("属性")　　属性を持っているか否か（使用例３）

      • removeAttribute("属性")　　要素の削除（使用例３）

      • removeChild("子ノード")　　子ノードの削除（使用例４）

      • removeEventListener("イベントタイプ", 処理, ユーザキャプチャ)　　イベント処理の削除（使用例６）

      • replaceChild("新ノード", "旧ノード")　　子ノード（旧ノード）を新ノードで置き換え（使用例４）

      • setAttribute("属性", "値")　　属性値の変更（使用例３）

    3. ［DOM スタイルシートプロパティ］

      　　以下に，主要な DOM スタイルシートプロパティを記述しておきます．なお，css におけるプロパティも併記しておきますので，値の設置方法についてはスタイルシートも参照して下さい．この表からも明らかなように，スタイルシートを使用する場合と，DOM を使用する場合とでは，プロパティ名が異なる場合がある点に注意してください．

      DOM CSS 説明
      background background 背景の一括指定
      backgroundAttachment background-attachment スクロールによる背景画像の移動
      backgroundColor background-color 背景色
      backgroundImage background-image 背景画像
      backgroundPosition background-position 背景画像の表示開始位置
      backgroundRepeat background-repeat 背景画像の繰り返し
      border border ボーダーの一括指定
      borderBottom border-bottom ボーダー下辺の一括指定
      borderBottomColor border-bottom-color ボーダー下辺の色
      borderBottomStyle border-bottom-style ボーダー下辺の線種
      borderBottomWidth border-bottom-width ボーダー下辺の線の太さ
      borderCollapse border-collapse セルのボーダーを重ねるか否か
      borderColor border-color ボーダーの色の一括指定
      borderLeft border-left ボーダー左辺の一括指定
      borderLeftColor border-left-color ボーダー左辺の色
      borderLeftStyle border-left-style ボーダー左辺の線種
      borderLeftWidth border-left-width ボーダー左辺の線の太さ
      borderRight border-right ボーダー右辺の一括指定
      borderRightColor border-right-color ボーダー右辺の色
      borderRightStyle border-right-style ボーダー右辺の線種
      borderRightWidth border-right-width ボーダー右辺の線の太さ
      borderSpacing border-spacing 隣接するセルのボーダー間隔
      borderStyle border-style ボーダーの線種の一括指定
      borderTop border-top ボーダー上辺の一括指定
      borderTopColor border-top-color ボーダー上辺の色
      borderTopStyle border-top-style ボーダー上辺の線種
      borderTopWidth border-top-width ボーダー上辺の線の太さ
      borderWidth border-width ボーダーの線の太さの一括指定
      bottom bottom 下からの表示位置
      captionSide caption-side テーブルキャプションの位置
      clear clear 文書の回り込みの解除
      color color 文字の色
      content content 要素の直前・直後へ文字列・画像を挿入
      cssFloat(styleFloat) float 文書の回り込み
      cursor cursor カーソルの形状
      display display 表示形式の切り替え
      emptyCells empty-cells 空白セルのボーダー
      font font フォントの一括指定
      fontFamily font-family フォントの種類
      fontSize font-size フォントの大きさ
      fontStyle font-style フォントのスタイル
      fontVariant font-variant 大文字スタイルの小文字
      fontWeight font-weight フォントの太さ
      height height 表示領域の高さ
      left left 左からの表示位置
      letterSpacing letter-spacing 文字の間隔
      lineHeight line-height 行の高さ
      listStyle list-style リストのマーカーに関する一括指定
      listStyleImage list-style-image リストのマーカー画像
      listStylePosition list-style-position リストのマーカーの表示位置
      listStyleType list-style-type リストのマーカーの表示形式
      margin margin マージンの一括指定
      marginBottom margin-bottom 下マージン
      marginLeft margin-left 左マージン
      marginRight margin-right 右マージン
      marginTop margin-top 上マージン
      maxHeight max-height 表示領域の最大の高さ
      maxWidth max-width 表示領域の最大の幅
      minHeight min-height 表示領域の最小の高さ
      minWidth min-width 表示領域の最小の幅
      overflow overflow あふれ部分の処理
      padding padding パディングの一括指定
      paddingBottom padding-bottom 下パディング
      paddingLeft padding-left 左パディング
      paddingRight padding-right 右パディング
      paddingTop padding-top 上パディング
      position position 表示位置
      quotes quotes 引用符の設定
      right right 右からの表示位置
      tableLayout table-layout テーブルのセル幅の設定方法
      textAlign text-align 行揃え・均等割り付け
      textDecoration text-decoration 下線，上線，取消線
      textIndent text-indent 段落の先頭のインデント
      textTransform text-transform 大文字／小文字の変換
      top top 上からの表示位置
      visibility visibility 要素の表示/非表示
      whiteSpace white-space 半角スペース・タブ・改行の表示方法
      width width 表示領域の幅
      wordSpacing word-spacing 単語の間隔
      zIndex z-index 要素の表示順序

    4. ［使用例］

      • 使用例１： プロパティ id，className，length，lang，tagName，及び，メソッド getElementsByTagName，getElementById を使用して，各要素の属性値や要素名を表示している． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>DOM プロパティ＆メソッド</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
</HEAD>
<BODY CLASS="white">
	<P ID="id1" CLASS="test1">P 要素：ID 属性の値は id1，CLASS 属性の値は test1</P>
	<P ID="id2" CLASS="test1">P 要素：ID 属性の値は id2，CLASS 属性の値は test1</P>
	<P ID="id3" CLASS="test2">P 要素：ID 属性の値は id3，CLASS 属性の値は test1</P>
	<P ID="id4" CLASS="test2">P 要素：ID 属性の値は id4，CLASS 属性の値は test1</P>
	<DIV LANG="ja">DIV 要素：日本語</DIV>
	<DIV LANG="en">DIV elemrnt：English</DIV>
	<SCRIPT TYPE="text/javascript">
		document.write("<BR>");
		let x = document.getElementsByTagName("p");
		for (let k = 0; k < x.length; k++)
			document.write("　　P 要素の ID 属性値：" + x[k].id + "<BR>");
		document.write("<BR>");
		for (let k = 0; k < x.length; k++)
			document.write("　　P 要素の CLASS 属性値：" + x[k].className + "<BR>");
		document.write("<BR>");
		let y = document.getElementById("id3").tagName;
		document.write("　　ID 属性が id3 であるタグの要素名：" + y + "<BR>");
		document.write("<BR>");
		document.write("　　P 要素の数：" + document.getElementsByTagName("p").length + "<BR>");
		document.write("<BR>");
		document.write("　　1 番目の DIV 要素の言語：" + document.getElementsByTagName("div")[0].lang + "<BR>");
		document.write("　　2 番目の DIV 要素の言語：" + document.getElementsByTagName("div")[1].lang + "<BR>");
	</SCRIPT>
</BODY>
</HTML>

      • 使用例２： innerHTML，innerText，outerHTML，outerText の使用例． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>DOM プロパティ＆メソッド</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
</HEAD>
<BODY CLASS="white">
	<H3 CLASS="center">innerHTML，innerText，outerHTML，outerText</H3>
	<DL>
		<DT>　　「innerHTML 表示」ボタンをクリックすると，「ここに表示１」の箇所に，「元に戻す」ボタンが表示され，そのボタンをクリックすると元の状態に戻すことができる．「innerText 表示」ボタンをクリックすると，タグの評価が行われず，テキストがそのまま表示される． 
		</P>
		<DT>　　「outerHTML 表示」ボタン，及び，「outerText 表示」ボタンの場合もほとんど同じであるが，「outerHTML 表示」ボタンをクリックすることによって表示された「元に戻れない」ボタンをクリックしても，元の状態に戻すことができない．また，「outerHTML 表示」ボタン，及び，「outerText 表示」ボタンの動作も無効になる． 
	</DL>
	<BR>
	<P CLASS="center">
		<SPAN ID="here">ここに表示１</SPAN>　　
		<INPUT TYPE="button" VALUE="innerHTML 表示" onClick="disp_h()">　　
		<INPUT TYPE="button" VALUE="innerText 表示" onClick="disp_t()">
	</P>
	<P CLASS="center">
		<SPAN ID="o_here">ここに表示２</SPAN>　　
		<INPUT TYPE="button" VALUE="outerHTML 表示" onClick="o_disp_h()">　　
		<INPUT TYPE="button" VALUE="outerText 表示" onClick="o_disp_t()">
	</P>
	<SCRIPT TYPE="text/javascript">
		function disp_h()
		{
			let str = '<INPUT TYPE="button" VALUE="元に戻す" onClick="disp_c()">';
			document.getElementById("here").innerHTML = str;
		}
		function disp_t()
		{
			let str = '<INPUT TYPE="button" VALUE="元に戻す" onClick="disp_c()">';
			if (navigator.userAgent.indexOf("Firefox") >= 0)
				document.getElementById("here").textContent = str;
			else
				document.getElementById("here").innerText = str;
		}
		function disp_c()
		{
			let str = 'ここに表示';
			if (navigator.userAgent.indexOf("Firefox") >= 0)
				document.getElementById("here").textContent = str;
			else
				document.getElementById("here").innerText = str;
		}
		function o_disp_h()
		{
			let str = '<INPUT TYPE="button" VALUE="元に戻れない">';
			document.getElementById("o_here").outerHTML = str;
		}
		function o_disp_t()
		{
			let str = '<INPUT TYPE="button" VALUE="元に戻れない">';
			document.getElementById("o_here").outerText = str;
		}
	</SCRIPT>
</BODY>
</HTML>

      • 使用例３： メソッド setAttribute による属性値及びスタイルの変更，メソッド getAttribute による属性値及びスタイルの取得，メソッド removeAttribute による属性の削除，及び，メソッド hasAttribute によって属性の有無をチェックしている． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>DOM プロパティ＆メソッド</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		sw1 = 0;
		sw2 = 0;

		function a_change1()
		{
			if (sw1 == 0) {
				sw1 = 1;
				document.getElementById("hana").setAttribute("width", "300");
			}
			else {
				sw1 = 0;
				document.getElementById("hana").setAttribute("width", "150");
			}
		}

		function a_change2()
		{
			if (sw1 == 0) {
				sw1 = 1;
				document.getElementById("hana").width = "300";
			}
			else {
				sw1 = 0;
				document.getElementById("hana").width = "150";
			}
		}

		function a_change3()
		{
			if (sw2 == 0) {
				sw2 = 1;
				document.getElementById("hana").setAttribute("style", "border-style: solid; border-width: 2px; border-color: green;");
			}
			else {
				sw2 = 0;
				document.getElementById("hana").setAttribute("style", "border-style: solid; border-width: 2px; border-color: red;");
			}
		}

		function a_change4()
		{
			if (sw2 == 0) {
				sw2 = 1;
				document.getElementById("hana").style.borderColor = "green";
			}
			else {
				sw2 = 0;
				document.getElementById("hana").style.borderColor = "red";
			}
		}

		function a_delete()
		{
			document.getElementById("hana").removeAttribute("width");
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white">
	<DIV CLASS="center">
		<IMG ID="hana" WIDTH="150" SRC="ajisai.gif" STYLE="border-style: solid; border-width: 2px; border-color: red;"><BR>
		属性値の変更： <BUTTON onClick="a_change1()">WIDTH 属性の変更（ setAttribute ）</BUTTON>　<BUTTON onClick="a_change2()">WIDTH 属性の変更（ width 直接）</BUTTON><BR>
		スタイルの変更： <BUTTON onClick="a_change3()">枠の色変更（ setAttribute ）</BUTTON>　<BUTTON onClick="a_change4()">枠の色変更（ style.borderColor 直接）</BUTTON><BR>
		<BUTTON onClick="a_delete()">WIDTH 属性を削除（ removeAttribute ）</BUTTON>
	</DIV>
	<SCRIPT TYPE="text/javascript">
		document.write("<P>IMG 要素の SRC 属性の値（ getAttribute ）：" + document.getElementById("hana").getAttribute("src") + "</P>");
		document.write("<P>IMG 要素の SRC 属性の値（ src 直接）：" + document.getElementById("hana").src + "</P>");
		document.write("<P>IMG 要素の STYLE 属性の値（ getAttribute ）：" + document.getElementById("hana").getAttribute("style") + "</P>");
		document.write("<P>IMG 要素の STYLE 属性の値（ style.borderColor 直接）：" + document.getElementById("hana").style.borderColor + "</P>");
		if (document.getElementById("hana").hasAttribute("alt"))
			document.write("<P>上図は alt 属性を持っている（ hasAttribute による結果）</P>");
		else
			document.write("<P>上図は alt 属性を持っていない（ hasAttribute による結果）</P>");
	</SCRIPT>
</BODY>
</HTML>

      • 使用例４： メソッド removeChild による子ノードの削除，メソッド replaceChild による子ノードの置き換え，及び，メソッド getAttributeNode によってノードの属性を取得している． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>DOM プロパティ＆メソッド</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function n_delete()
		{
			let child = document.getElementById("child_2_1");
			document.getElementById("child_2").removeChild(child);
		}
		function n_replace()
		{
			let child1 = document.getElementById("child_1");
			let child2 = document.getElementById("child_2");
			document.getElementById("top").replaceChild(child2, child1);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white">
	<DIV STYLE="text-align: center">
		<BUTTON onClick="n_delete()">孫２を削除</BUTTON>　
		<BUTTON onClick="n_replace()">子供１を子供２で置き換え</BUTTON>
	</DIV>
	<DIV ID="top" CLASS="top_node">
		トップノード
		<DIV ID="child_1">
			　　子供１
			<DIV ID="child_1_1">
				　　　　孫１
			</DIV>
		</DIV>
		<DIV ID="child_2">
			　　子供２
			<DIV ID="child_2_1">
				　　　　孫２
			</DIV>
		</DIV>
	</DIV>
	<SCRIPT TYPE="text/javascript">
		document.write("<BR>");
		document.write("　　＊＊＊トップノード（ CLASS 属性）：" + document.getElementById("top").getAttributeNode("class") + "</P>");
		document.write("　　＊＊＊トップノード（ CLASS 属性の値）：" + document.getElementById("top").getAttributeNode("class").value + "</P>");
	</SCRIPT>
</BODY>
</HTML>

      • 使用例５： メソッド appendChild によって，DIV 要素の中に CANVAS 要素を追加し，そこに矩形と円を描いている． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>要素の追加</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let area    = document.getElementById("canvas_e");   // キャンバスを挿入する場所
			let canvas1 = document.createElement("canvas");   // キャンバス要素を生成
			canvas1.style.backgroundColor = "#eeffee";   // キャンバスの背景色
			canvas1.width  = 140;   // キャンバス要素の幅
			canvas1.height = 140;   // キャンバス要素の高さ
			area.appendChild(canvas1);   // キャンバス要素を追加
			let ctx = canvas1.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, Math.PI*2, false);
			ctx.stroke();
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>要素の追加</H1>
	<DIV ID="canvas_e"></DIV>
</BODY>
</HTML>

      • 使用例６： メソッド addEventListener，及び，removeEventListener によって，マウスのクリックによるイベント処理の追加・削除を行っている． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>イベント処理の追加・削除</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		sw = 0;
		function e_add()
		{
			let but = document.getElementById("hana_c");
			but.addEventListener("click", h_change);
			alert("「花の変更」ボタンを有効にしました");
		}
		function e_delete()
		{
			let but = document.getElementById("hana_c");
			but.removeEventListener("click", h_change);
			alert("「花の変更」ボタンを無効にしました");
		}
		function h_change()
		{
			let hana = document.getElementById("hana");
			if (sw == 0) {
				hana.src = "sakura.gif";
				sw = 1;
			}
			else {
				hana.src = "ajisai.gif";
				sw = 0;
			}
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white">
	<DIV CLASS="center">
		<IMG ID="hana" SRC="ajisai.gif"><BR>
		<BUTTON onClick="e_add()">イベント処理の追加</BUTTON>
		<BUTTON onClick="e_delete()">イベント処理の削除</BUTTON>
		<BUTTON ID="hana_c">花の変更</BUTTON>　
	</DIV>
</BODY>
</HTML>

  2. CANVAS
    　　CANVAS 要素は，図を描く領域を確保するために使用される HTML の要素です．実際に図を描くには，以下に示すような JavaScript のメソッドが使用されます．また，上で述べた DOM のプロパティやメソッドを使用する場合も多いと思います．

    1. ［CANVAS のメソッド］

      • getContext(contextId)　　CANVAS に描画するための API にアクセスできるオブジェクト（コンテキスト）を返す（使用例７，使用例８）

      • toDataURL("MIME タイプ")　　CANVAS 画面のピクセル情報を data URL 形式（文字列）に変換（ MIME タイプのデフォルトは png 形式)．変換された文字列を IMG 要素の SRC 属性に設定することによって，CANVAS 内で作成した画像を IMG 要素に反映することが可能．（使用例９）

    2. ［2d コンテキストのプロパティとメソッド］

      1. インタフェース

        2. interface CanvasRenderingContext2D {

  // back-reference to the canvas
  readonly attribute HTMLCanvasElement canvas;

  // state
  void save(); // push state on state stack
  void restore(); // pop state stack and restore state

  // transformations (default transform is the identity matrix)
           attribute SVGMatrix currentTransform;
  void scale(unrestricted double x, unrestricted double y);
  void rotate(unrestricted double angle);
  void translate(unrestricted double x, unrestricted double y);
  void transform(unrestricted double a, unrestricted double b, unrestricted double c, unrestricted double d, unrestricted double e, unrestricted double f);
  void setTransform(unrestricted double a, unrestricted double b, unrestricted double c, unrestricted double d, unrestricted double e, unrestricted double f);
  void resetTransform();

  // compositing
           attribute unrestricted double globalAlpha; // (default 1.0)
           attribute DOMString globalCompositeOperation; // (default source-over)

  // image smoothing
           attribute boolean imageSmoothingEnabled; // (default true)

  // colors and styles (see also the CanvasDrawingStyles interface)
           attribute (DOMString or CanvasGradient or CanvasPattern) strokeStyle; // (default black)
           attribute (DOMString or CanvasGradient or CanvasPattern) fillStyle; // (default black)
  CanvasGradient createLinearGradient(double x0, double y0, double x1, double y1);
  CanvasGradient createRadialGradient(double x0, double y0, double r0, double x1, double y1, double r1);
  CanvasPattern createPattern((HTMLImageElement or HTMLCanvasElement or HTMLVideoElement) image, DOMString repetition);

  // shadows
           attribute unrestricted double shadowOffsetX; // (default 0)
           attribute unrestricted double shadowOffsetY; // (default 0)
           attribute unrestricted double shadowBlur; // (default 0)
           attribute DOMString shadowColor; // (default transparent black)

  // rects
  void clearRect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
  void fillRect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
  void strokeRect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);

  // path API (see also CanvasPathMethods)
  void beginPath();
  void fill();
  void fill(Path path);
  void stroke();
  void stroke(Path path);
  void drawSystemFocusRing(Element element);
  void drawSystemFocusRing(Path path, Element element);
  boolean drawCustomFocusRing(Element element);
  boolean drawCustomFocusRing(Path path, Element element);
  void scrollPathIntoView();
  void scrollPathIntoView(Path path);
  void clip();
  void clip(Path path);
  void resetClip();
  boolean isPointInPath(unrestricted double x, unrestricted double y);
  boolean isPointInPath(Path path, unrestricted double x, unrestricted double y);

  // text (see also the CanvasDrawingStyles interface)
  void fillText(DOMString text, unrestricted double x, unrestricted double y, optional unrestricted double maxWidth);
  void strokeText(DOMString text, unrestricted double x, unrestricted double y, optional unrestricted double maxWidth);
  TextMetrics measureText(DOMString text);

  // drawing images
  void drawImage((HTMLImageElement or HTMLCanvasElement or HTMLVideoElement) image, unrestricted double dx, unrestricted double dy);
  void drawImage((HTMLImageElement or HTMLCanvasElement or HTMLVideoElement) image, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);
  void drawImage((HTMLImageElement or HTMLCanvasElement or HTMLVideoElement) image, unrestricted double sx, unrestricted double sy, unrestricted double sw, unrestricted double sh, unrestricted double dx, unrestricted double dy, unrestricted double dw, unrestricted double dh);

  // hit regions
  void addHitRegion(HitRegionOptions options);
  void removeHitRegion(HitRegionOptions options);

  // pixel manipulation
  ImageData createImageData(double sw, double sh);
  ImageData createImageData(ImageData imagedata);
  ImageData createImageDataHD(double sw, double sh);
  ImageData getImageData(double sx, double sy, double sw, double sh);
  ImageData getImageDataHD(double sx, double sy, double sw, double sh);
  void putImageData(ImageData imagedata, double dx, double dy);
  void putImageData(ImageData imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight);
  void putImageDataHD(ImageData imagedata, double dx, double dy);
  void putImageDataHD(ImageData imagedata, double dx, double dy, double dirtyX, double dirtyY, double dirtyWidth, double dirtyHeight);
};
CanvasRenderingContext2D implements CanvasDrawingStyles;
CanvasRenderingContext2D implements CanvasPathMethods;

[NoInterfaceObject]
interface CanvasDrawingStyles {
  // line caps/joins
           attribute unrestricted double lineWidth; // (default 1)
           attribute DOMString lineCap; // "butt", "round", "square" (default "butt")
           attribute DOMString lineJoin; // "round", "bevel", "miter" (default "miter")
           attribute unrestricted double miterLimit; // (default 10)

  // dashed lines
  void setLineDash(sequence segments); // default empty
  sequence getLineDash();
           attribute unrestricted double lineDashOffset;

  // text
           attribute DOMString font; // (default 10px sans-serif)
           attribute DOMString textAlign; // "start", "end", "left", "right", "center" (default: "start")
           attribute DOMString textBaseline; // "top", "hanging", "middle", "alphabetic", "ideographic", "bottom" (default: "alphabetic")
};

[NoInterfaceObject]
interface CanvasPathMethods {
  // shared path API methods
  void closePath();
  void moveTo(unrestricted double x, unrestricted double y);
  void lineTo(unrestricted double x, unrestricted double y);
  void quadraticCurveTo(unrestricted double cpx, unrestricted double cpy, unrestricted double x, unrestricted double y);
  void bezierCurveTo(unrestricted double cp1x, unrestricted double cp1y, unrestricted double cp2x, unrestricted double cp2y, unrestricted double x, unrestricted double y);
  void arcTo(unrestricted double x1, unrestricted double y1, unrestricted double x2, unrestricted double y2, unrestricted double radius); 
  void arcTo(unrestricted double x1, unrestricted double y1, unrestricted double x2, unrestricted double y2, unrestricted double radiusX, unrestricted double radiusY, unrestricted double rotation); 
  void rect(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
  void arc(unrestricted double x, unrestricted double y, unrestricted double radius, unrestricted double startAngle, unrestricted double endAngle, optional boolean anticlockwise = false); 
  void ellipse(unrestricted double x, unrestricted double y, unrestricted double radiusX, unrestricted double radiusY, unrestricted double rotation, unrestricted double startAngle, unrestricted double endAngle, boolean anticlockwise); 
};

interface CanvasGradient {
  // opaque object
  void addColorStop(double offset, DOMString color);
};

interface CanvasPattern {
  // opaque object
  void setTransform(SVGMatrix transform);
};

interface TextMetrics {
  // x-direction
  readonly attribute double width; // advance width
  readonly attribute double actualBoundingBoxLeft;
  readonly attribute double actualBoundingBoxRight;

  // y-direction
  readonly attribute double fontBoundingBoxAscent;
  readonly attribute double fontBoundingBoxDescent;
  readonly attribute double actualBoundingBoxAscent;
  readonly attribute double actualBoundingBoxDescent;
  readonly attribute double emHeightAscent;
  readonly attribute double emHeightDescent;
  readonly attribute double hangingBaseline;
  readonly attribute double alphabeticBaseline;
  readonly attribute double ideographicBaseline;
};

dictionary HitRegionOptions {
  Path? path = null;
  DOMString id = "";
  DOMString? parentID = null;
  DOMString cursor = "inherit";
  // for control-backed regions:
  Element? control = null;
  // for unbacked regions:
  DOMString? label = null;
  DOMString? role = null;
};

interface ImageData {
  readonly attribute unsigned long width;
  readonly attribute unsigned long height;
  readonly attribute Uint8ClampedArray data;
};

[Constructor(optional Element scope)]
interface DrawingStyle { };
DrawingStyle implements CanvasDrawingStyles;

[Constructor,
 Constructor(Path path),
 Constructor(DOMString d)]
interface Path {
  void addPath(Path path, SVGMatrix? transformation);
  void addPathByStrokingPath(Path path, CanvasDrawingStyles styles, SVGMatrix? transformation);
  void addText(DOMString text, CanvasDrawingStyles styles, SVGMatrix? transformation, unrestricted double x, unrestricted double y, optional unrestricted double maxWidth);
  void addPathByStrokingText(DOMString text, CanvasDrawingStyles styles, SVGMatrix? transformation, unrestricted double x, unrestricted double y, optional unrestricted double maxWidth);
  void addText(DOMString text, CanvasDrawingStyles styles, SVGMatrix? transformation, Path path, optional unrestricted double maxWidth);
  void addPathByStrokingText(DOMString text, CanvasDrawingStyles styles, SVGMatrix? transformation, Path path, optional unrestricted double maxWidth);
};
Path implements CanvasPathMethods;

      2. CANVAS の状態

        • context.restore()　　状態の復元（使用例10）

        • context.save()　　以下に示す状態を保存（使用例10）

          • 変換マトリックス
          • 切り抜き領域
          • 以下の属性の現在値：　strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, imageSmoothingEnabled.
          • dash list.

      3. パスの生成と描画

        4. 　　CANVAS 上に描かれた画像（オブジェクト）はパスから構成されている．各パスは，0 個以上のサブパスからなっている（初期値は 0 ）．各々のサブパスは，直線又は曲線で結ばれた 1 つ以上の点とそのサブパスが閉じられているか否かの情報から構成されている．閉じられたサブパスでは，サブパスの最後の点は最初の点と直線で結ばれている．また，1 個以下の点から構成されているサブパスは描画の際無視される．

        • context.arc(x, y, radius, startAngle, endAngle [, anticlockwise ] )　　与えられた点を中心とした半径 radius の円弧を startAngle から endAngle まで，指定された方向に描く（デフォルトは，anticlockwise = false であるので，時計回りに描く）（使用例13）

        • context.arcTo(x1, y1, x2, y2, radius)　　直前の点 (x0, y0) と直線で結ばれた円弧（直線 (x0, y0) - (x1, y1) と直線 (x1, y1) - (x2, y2) との角を円弧にする）（使用例13）

        • context.beginPath()　　現在のサブパスをリセット（使用例11）

        • context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)　　与えられた点と直前の点を，制御点を利用して 3 次ベジェ曲線で結ぶ（使用例12）

        • context.clearRect(x, y, w, h)　　指定した矩形領域をクリア（使用例15）

        • context.clip()　　呼び出される直前までに生成されたサブパスの図形で,切り抜き窓がセットされる．以後，切り抜き窓内だけが表示されるようになる．新規の切り抜き領域を指定した場合には，現在の切り抜き領域と置き換えられる．また，コンテキストを初期化すると，CANVAS 全体が切り抜き領域として設定される．（使用例16）

        • context.closePath()　　現在のサブパスの最後の点と最初の点を結びパスを閉じる．そして，閉じたサブパスの最初の点に基づき新しいサブパスを生成（使用例11）

        • context.fill()　　サブパスを塗りつぶす（使用例13，使用例14）

        • context.fillRect(x, y, w, h)　　指定した位置（矩形の左上）に塗りつぶした矩形を描く（ stroke や fill メソッドを必要としない）（使用例15）

        • context.isPointInPath(x, y)　　与えられた点がパス内にあるか否かを判定する（使用例11）

        • context.lineTo(x, y)　　与えられた点と直前の点を直線で結ぶ（使用例11）

        • context.moveTo(x, y)　　与えられた座標に基づき，新しいサブパスの生成（使用例11）

        • context.quadraticCurveTo(cpx, cpy, x, y)　　与えられた点と直前の点を，制御点を利用して 2 次ベジェ曲線で結ぶ（使用例12）

        • context.rect(x, y, w, h)　　指定した位置（矩形の左上）に矩形を描く（使用例14）

        • context.stroke()　　サブパスの輪郭を表示する（使用例11）

        • context.strokeRect(x, y, w, h)　　指定した位置（矩形の左上）に矩形を描く（ stroke や fill メソッドを必要としない）（使用例15）

      4. Line，fill，stroke スタイル

        • context.fillStyle [ = value ]　　塗りつぶしの色や図形内部のスタイル（グラデーション，背景パターン）を指定（使用例19，使用例20）

        • context.lineCap [ = value ]　　線端の形状（使用例17）

          • butt： 先端でそのまま終了（デフォルト）
          • round： 先端に半円を追加
          • square： 先端に線幅の半分の長方形を追加

        • context.lineJoin [ = value ]　　線の接合箇所の形状（使用例18）

          • miter： 面取りしない（デフォルト）
          • round： 丸くする
          • bevel： 面取りする

        • context.lineWidth [ = value ]　　線の太さ（使用例17）

        • context.miterLimit [ = value ]　　線の接合箇所を miter 表示にする限界．先端の長さが線幅にこの値を乗じたものより長くなると，面取りされる．（使用例18）

        • context.strokeStyle [ = value ]　　線の色，または，グラデーションを指定（使用例21）

        • gradient = context.createLinearGradient(x0, y0, x1, y1)　　開始点 (x0, y0) と終了点 (x1, y1) を指定し，2 点間を結ぶ線形グラデーションを定義（使用例21）

        • gradient = context.createRadialGradient(x0, y0, r0, x1, y1, r1)　　中心 (x0, y0)，半径 r0 の円から，中心 (x1, y1)，半径 r1 を指定し，2 つの円を結ぶ円形グラデーションを定義（使用例19）

        • gradient.addColorStop(offset, color)　　開始点から offset だけ離れた点の色 color を指定（使用例19，使用例21）

        • pattern = context.createPattern(image, repetition)　　背景パターンとその繰り返し方法を指定．imageは，背景パターンに使用するイメージデータ（ canvas，img，video ）．repetition は以下に示すいずれかの値をとる．（使用例20）

          • repeat： 水平・垂直の両方向に繰り返す（デフォルト）
          • repeat-x： 水平方向にのみ繰り返す
          • repeat-y： 垂直方向にのみ繰り返す
          • no-repeat： 繰り返さない

      5. テキストスタイルと描画

        • context.fillText(text, x, y [, maxWidth ] )　　塗りつぶしのテキストを指定位置に描く（使用例22）

        • context.font [ = value ]　　フォントの設定（使用例22）

        • context.strokeText(text, x, y [, maxWidth ] )　　テキストの輪郭を指定位置に描く（使用例22）

        • context.textAlign [ = value ]　　テキストの揃え位置（横位置）（使用例22）

          • start： 指定した位置から開始（デフォルト）
          • end： 文字列の最後が指定位置
          • left： 文字列の左が指定位置（左揃え）
          • right： 文字列の右が指定位置（右揃え）
          • center： 文字列の中央が指定位置（中央揃え）

        • context.textBaseline [ = value ]　　テキストのベースライン（縦位置）（使用例22）

          • alphabetic： 文字列のほぼ下端（デフォルト）
          • ideographic： 文字列のほぼ下端（ alphabetic より少し下）
          • bottom： 文字列のほぼ下端（ ideographic より少し下）
          • hanging： 文字列のほぼ上端
          • top： 文字列のほぼ上端（ hanging より少し上）
          • middle： 文字列の中央

        • metrics = context.measureText(text)　　テキストのメトリックス（描画幅などの性質）を取得（使用例23）

          • metrics.width： 文字列の長さ

      6. 画像の描画とピクセル操作

        • context.drawImage(image, dx, dy)　　画像（ img，canvas，video ）を指定した位置に描く（使用例16，使用例24）

        • context.drawImage(image, dx, dy, dw, dh)　　幅と高さを指定して，画像（ img，canvas，video ）を指定した位置に描く（使用例24）

        • context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)　　画像（ img，canvas，video ）の指定した範囲（ sx, sy, sw, sh ）を，指定した位置（ dx, dy ）に指定した大きさ（ dw, dh ）で描く（使用例24）

        • ImageData = context.getImageData(sx, sy, sw, sh)　　CANVAS から，指定範囲の ImageData オブジェクトを取得（使用例９，使用例24，使用例25）

          • ImageData.width： ImageDataオ ブジェクトの幅
          • ImageData.height： ImageData オブジェクトの高さ
          • ImageData.data： RGBA 順の一次配列データ

        • ImageData = context.createImageData(sw, sh)　　指定された大きさの ImageData オブジェクトを生成（使用例９，使用例24，使用例25）

        • ImageData = context.createImageData(imagedata)　　引数と同じ大きさの ImageData オブジェクトを生成（使用例９，使用例24）

        • context.putImageData(imagedata, dx, dy [, dirtyX, dirtyY, dirtyWidth, dirtyHeight ])　　ImageData オブジェクトを指定した位置に描画する．省略可能部分は，ImageData オブジェクトの描画範囲であり，省略すると全体を描画する．（使用例９，使用例24，使用例25）

      7. 影の付加

        • context.shadowBlur [ = value ]　　影のぼかしレベル（使用例26）

        • context.shadowColor [ = value ]　　影の色（使用例26）

        • context.shadowOffsetX [ = value ]　　影の水平方向のオフセット（使用例26）

        • context.shadowOffsetY [ = value ]　　影の垂直方向のオフセット（使用例26）

      8. 透明度と合成

        • context.globalAlpha [ = value ]　　図形やイメージの透明度（使用例27）

        • context.globalCompositeOperation [ = value ]　　合成方法

          • source-atop： 既に描いたイメージの領域のみが描画され，source-atop 属性を指定して新しく描いたイメージと重なった部分には，新しく描いたイメージが表示され，新規イメージとなる（使用例28）

          • source-in： source-in 属性を指定して新しく描いたイメージの，既に描いたイメージの領域と重なった部分だけが新規イメージとして描画される（使用例29）

          • source-out： source-out 属性を指定して新しく描いたイメージの，既に描いたイメージの領域と重ならない部分だけが描画される（使用例30）

          • source-over： 既に描いたイメージの上に，source-over 属性を指定して新しく描いたイメージが描画され，重なった部分は新規イメージとなる（デフォルト）（使用例31）

          • destination-atop： destination-atop 属性を指定して新しく描いた領域のみが描画され，既に描いたイメージと重なった部分には，既に描いたイメージが表示され，新規イメージとなる（使用例32）

          • destination-in： 既に描いたイメージの，destination-in 属性を指定して新しく描いた領域と重なった部分だけが現在イメージとして描画される（使用例33）

          • destination-out： 既に描いたイメージの，destination-out 属性を指定して新しく描いた領域と重ならない部分だけが現在イメージとして描画される（使用例34）

          • destination-over： destination-over 属性を指定して新しく描いたイメージの上に，既に描いたイメージが描画され，重なった部分は現在イメージとなる（使用例35）

          • lighter： lighter 属性を指定して新しく描いたイメージと，既に描いたイメージが描画され，重なった部分は混色して描画される（使用例36）

          • copy： copy 属性を指定して新しく描いた領域のみが描画され，既に描いたイメージと重なった部分には，新しく描いたイメージが表示され，新規イメージとなる（使用例37）

          • xor： xor 属性を指定して新しく描いたイメージと既に描いたイメージの両方が表示され，重なった部分は表示されない（使用例38）

      9. 回転，移動，拡大・縮小

        • context.rotate(angle)　　与えられた角度（ラジアン）だけ座標軸を回転する（使用例40）

        • context.scale(x, y)　　x 及び y 軸の拡大縮小係数を与え，座標軸を拡大・縮小する（使用例39）

        • context.setTransform(a, b, c, d, e, f)　　今までの変換マトリックスをリセットし，新しい変換マトリックスを利用して座標軸を変換する（使用例42）

          • 旧座標軸による座標を p_old = [x1, y1]， 新座標軸による座標を p_new = [x2, y2] とすると，以下に示すような関係がある．
            　　　[x2, y2, 1]T = A [x1, y1, 1]T
          • 拡大縮小： scale(x, y) = transform(x, 0, 0, y, 0, 0)
          • 回転： rotate(angle) = transform(Math.cos(angle), Math.sin(angle), -Math.sin(angle), Math.cos(angle), 0, 0)
          • 移動： translate(x, y) = transform(1, 0, 0, 1, x, y)
          • 変換しない（元の状態に戻す）： setTransform(1, 0, 0, 1, 0, 0)

        • context.transform(a, b, c, d, e, f)　　変換マトリックスを利用して座標軸を変換する（使用例42）

        • context.translate(x, y)　　座標軸の原点を指定された位置に移動する（使用例41）

    3. ［使用例］

      • 使用例７： CANVAS 要素を使用して描画する基本的方法である．メソッド getElementById によってコンテキストを取得した後，CANVAS 要素内に，メソッド beginPath， moveTo，lineTo，closePath，stroke によって矩形を，また，メソッド beginPath，arc，stroke によって円を描いている． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>CANVAS の例（描画）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 140;   // キャンバス要素の幅
			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();
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>簡単な描画</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="140" HEIGHT="140"></CANVAS>
</BODY>
</HTML>

      • 使用例８： 基本的に，使用例７と同じであるが，この例では，初期段階で HTML ファイル内に CANVAS 要素が存在しないため，メソッド appendChild によって，DIV 要素内に CANVAS 要素を追加した後描画している． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>CANVAS の例（描画）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let area    = document.getElementById("canvas_e");   // キャンバスを挿入する場所
			let canvas1 = document.createElement("canvas");   // キャンバス要素を生成
			canvas1.style.backgroundColor = "#eeffee";   // キャンバスの背景色
			canvas1.width  = 140;   // キャンバス要素の幅
			canvas1.height = 140;   // キャンバス要素の高さ
			area.appendChild(canvas1);   // キャンバス要素を追加
			let ctx = canvas1.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, Math.PI*2, false);
			ctx.stroke();
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>簡単な描画</H1>
	<DIV ID="canvas_e"></DIV>
</BODY>
</HTML>

      • 使用例９： CANVAS 要素内に描かれた図形のピクセル情報を，メソッド getImageData，createImageData，putImageData によって取得し，上下反転した後，toDataURL によって変換し，IMG 要素に設定している． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>ImageData オブジェクト</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		canvas = null;
		ctx    = null;
		function draw() {
			canvas        = document.getElementById('canvas_1');
			canvas.width  = 140;   // キャンバス要素の幅
			canvas.height = 140;   // キャンバス要素の高さ
			ctx           = canvas.getContext('2d');
					// 三角形を描く
			ctx.beginPath();
			ctx.moveTo(70, 20);
			ctx.lineTo(120, 120);
			ctx.lineTo(20, 120);
			ctx.closePath();
			ctx.stroke();
					// 円を描く
			ctx.beginPath();
			ctx.arc(70, 70, 40, 0, Math.PI*2, false);
			ctx.stroke();
		}

		function c_copy()
		{
			let old_d = ctx.getImageData(0, 0, canvas.width, canvas.height);
			let new_d = ctx.createImageData(canvas.width, canvas.height);
					// 上下反転
			for (let i1 = 0; i1 < canvas.height; i1++) {
				for (let i2 = 0; i2 < canvas.width; i2++) {
					new_d.data[(i2 * 4) + ((canvas.height - 1 - i1) * canvas.width * 4)] = old_d.data[(i2 * 4) + (i1 * canvas.width * 4)];
					new_d.data[1 + (i2 * 4) + ((canvas.height - 1 - i1) * canvas.width * 4)] = old_d.data[1 + (i2 * 4) + (i1 * canvas.width * 4)];
					new_d.data[2 + (i2 * 4) + ((canvas.height - 1 - i1) * canvas.width * 4)] = old_d.data[2 + (i2 * 4) + (i1 * canvas.width * 4)];
					new_d.data[3 + (i2 * 4) + ((canvas.height - 1 - i1) * canvas.width * 4)] = old_d.data[3 + (i2 * 4) + (i1 * canvas.width * 4)];
				}
			}
			ctx.putImageData(new_d, 0, 0);
					// IMG 要素に設定
			let c_data = canvas.toDataURL("image/png");
			document.getElementById('img_1').src = c_data;
			ctx.putImageData(old_d, 0, 0);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>ImageData オブジェクト</H1>
	<H3>（左の CANVAS 内に描かれた図形を，上下反転して，右側の IMG 要素に設定）</H3>
	<CANVAS ID="canvas_1" STYLE="background-color: #eeffee;" WIDTH="140" HEIGHT="140"></CANVAS>　
	<IMG ID="img_1" STYLE="background-color: #eeffee;" WIDTH="140" HEIGHT="140"></IMG><BR>
	<BUTTON onClick="c_copy()">右へコピー</BUTTON>
</BODY>
</HTML>

      • 使用例10： メソッド save によって線の太さを保存し，メソッド restore によってそれを復元している． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>save，restore</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		canvas = null;
		ctx    = null;
		function draw() {
			canvas = document.getElementById('canvas_e');
			ctx    = canvas.getContext('2d');
			canvas.width  = 140;   // キャンバス要素の幅
			canvas.height = 140;   // キャンバス要素の高さ
					// 線の太さを設定して保存
			ctx.lineWidth = 5;
			ctx.save();
					// 矩形を描く
			ctx.lineWidth = 1;
			ctx.beginPath();
			ctx.moveTo(20, 20);
			ctx.lineTo(120, 20);
			ctx.lineTo(120, 120);
			ctx.lineTo(20, 120);
			ctx.closePath();
			ctx.stroke();
		}

		function l_restore()
		{
					// 円を描く
			ctx.restore();   // 保存してあった線の太さを復元
			ctx.beginPath();
			ctx.arc(70, 70, 40, 0, Math.PI*2, false);
			ctx.stroke();
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>save，restore</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="140" HEIGHT="140"></CANVAS><BR>
	<INPUT TYPE="button" VALUE="線の太さを復元" onClick="l_restore()">
</BODY>
</HTML>

      • 使用例11： メソッド moveTo，lineTo，closePath，stroke，beginPath を使用して，三角形及び鍵型を描いている．また，メソッド isPointInPath を使用して，三角形内に与えられた点が入っているか否かのチェックも行っている． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>直線の描画</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 400;   // キャンバス要素の幅
			canvas.height = 70;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 閉じた直線
			ctx.moveTo(20, 20);
			ctx.lineTo(120, 20);
			ctx.lineTo(120, 50);
			ctx.closePath();
			ctx.stroke();   // 下でサブパスをリセットしているのでこの行がないと描画されない
			if (navigator.appName.indexOf("Explorer") < 0) {
				let ok1 = ctx.isPointInPath(50, 25);   // パス内にある
				alert("(50, 25) パス内？ " + ok1);
				let ok2 = ctx.isPointInPath(20, 30);   // パス内にない
				alert("(20, 30) パス内？ " + ok2);
			}
					// 直線
			ctx.beginPath();
			ctx.moveTo(150, 20);
			ctx.lineTo(250, 20);
			ctx.lineTo(250, 50);

			ctx.moveTo(280, 20);   // 新しいサブパスの生成
			ctx.lineTo(380, 20);
			ctx.lineTo(380, 50);
			ctx.stroke();
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>直線の描画</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="400" HEIGHT="70"></CANVAS>
</BODY>
</HTML>

      • 使用例12： メソッド quadraticCurveTo 及び bezierCurveTo を利用して，2 次及び 3 次のベジェ曲線を描いている． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>ベジェ曲線</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 280;   // キャンバス要素の幅
			canvas.height = 100;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// ベジェ曲線
							// 2 次
			ctx.beginPath();
			ctx.moveTo(20, 30);
			ctx.quadraticCurveTo(100, 0, 120, 80);
							// 3 次
			ctx.moveTo(150, 30);
			ctx.bezierCurveTo(170, 70, 220, 30, 250, 80);
			ctx.stroke();
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>ベジェ曲線</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="280" HEIGHT="100"></CANVAS>
</BODY>
</HTML>

      • 使用例13： メソッド arcTo，arc，fill を使用して，円・円弧及び塗りつぶした扇形を描いている． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>円，円弧</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 400;   // キャンバス要素の幅
			canvas.height = 140;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 円，円弧
							// 角を丸める
			ctx.moveTo(20, 20);
			ctx.arcTo(120, 20, 120, 110, 50);
			ctx.lineTo(120, 120);
			ctx.stroke();
							// 円弧
			ctx.beginPath();
			ctx.arc(200, 60, 40, 0, 1.5*Math.PI, false);
			ctx.stroke();
							// 塗りつぶした円弧
			ctx.beginPath();
			ctx.arc(320, 60, 40, 0, 1.5*Math.PI, false);
			ctx.fill();
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>円，円弧</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="400" HEIGHT="140"></CANVAS>
</BODY>
</HTML>

      • 使用例14： 直線の組合せ（ moveTo，lineTo ）及びメソッド rect と，stroke 及び fill の組合せによって，矩形と塗りつぶした矩形を描いている． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>矩形（方法１）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 530;   // キャンバス要素の幅
			canvas.height = 70;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 矩形
							// 直線の組合せ
			ctx.beginPath();
			ctx.moveTo(20, 20);
			ctx.lineTo(120, 20);
			ctx.lineTo(120, 50);
			ctx.lineTo(20, 50);
			ctx.closePath();
			ctx.stroke();
							// rect メソッド
			ctx.beginPath();
			ctx.rect(150, 20, 100, 30);
			ctx.stroke();
							// 塗りつぶした矩形（直線の組合せ）
			ctx.beginPath();
			ctx.moveTo(280, 20);
			ctx.lineTo(380, 20);
			ctx.lineTo(380, 50);
			ctx.lineTo(280, 50);
			ctx.closePath();
			ctx.fill();
							// 塗りつぶした矩形（ rect メソッド）
			ctx.beginPath();
			ctx.rect(410, 20, 100, 30);
			ctx.fill();
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>矩形（方法１）</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="530" HEIGHT="70"></CANVAS>
</BODY>
</HTML>

      • 使用例15： メソッド strokeRect，及び，fillRect によって，矩形及び塗りつぶした矩形を描いている．また，右端の塗りつぶした矩形の一部はメソッド clearRect によって消去されている． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>矩形（方法２）と領域のクリア</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 400;   // キャンバス要素の幅
			canvas.height = 70;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 矩形
							// 矩形（ strokeRect メソッド）
			ctx.strokeRect(20, 20, 100, 30);
							// 塗りつぶした矩形（ fillRect メソッド）
			ctx.fillRect(150, 20, 100, 30);
							//  領域のクリア
			ctx.fillRect(280, 20, 100, 30);
			ctx.clearRect(330, 35, 380, 50);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>矩形（方法２）と領域のクリア</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="400" HEIGHT="70"></CANVAS>
</BODY>
</HTML>

      • 使用例16： メソッド clip によって円形の切り取り窓をセットし，その中にメソッド drawImage によって画像を描画している． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>clip</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		img     = new Image();
		img.src = "sakura.gif";
		canvas = null;
		ctx    = null;
		function draw() {
			canvas = document.getElementById('canvas_e');
			ctx    = canvas.getContext('2d');
			canvas.width  = 210;   // キャンバス要素の幅
			canvas.height = 100;   // キャンバス要素の高さ
					// 背景を黒で塗りつぶす
			ctx.beginPath();
			ctx.rect(0, 0, 210, 100);
			ctx.fillStyle = "rgb(0,0,0)";
			ctx.fill();
					// 円形の切り抜き領域を設定
			ctx.beginPath();
			ctx.arc(105, 50, 45, 0, Math.PI * 2, false);
			ctx.clip();
					// 図形を描く
			ctx.drawImage(img, 0, 0);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>clip</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="210" HEIGHT="100"></CANVAS>
</BODY>
</HTML>

      • 使用例17： 線の太さをプロパティ lineWidth で変更した後，プロパティ lineCap によって線端の形状を変化させた直線を描いている． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>線の太さと線端の形状</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 240;   // キャンバス要素の幅
			canvas.height = 200;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// lineCap
			ctx.lineWidth = 40;
			ctx.lineCap   = "butt";
			ctx.moveTo(40, 40);
			ctx.lineTo(200, 40);
			ctx.stroke();

			ctx.beginPath();
			ctx.lineCap = "round";
			ctx.moveTo(40, 100);
			ctx.lineTo(200, 100);
			ctx.stroke();

			ctx.beginPath();
			ctx.lineCap = "square";
			ctx.moveTo(40, 160);
			ctx.lineTo(200, 160);
			ctx.stroke();
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>線の太さと線端の形状</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="240" HEIGHT="200"></CANVAS>
</BODY>
</HTML>

      • 使用例18： 線の太さ，線の接合箇所の形状，及び，面取り方法をプロパティ lineWidth，lineJoin，及び，miterLimit によって変化させ，直線を描いている． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>線の接合箇所の処理</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 470;   // キャンバス要素の幅
			canvas.height = 340;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// lineJoin
			ctx.lineWidth = 40;
			ctx.beginPath();
			ctx.lineJoin = "miter";
			ctx.moveTo(40, 150);
			ctx.lineTo(80, 70);
			ctx.lineTo(120, 150);
			ctx.stroke();

			ctx.beginPath();
			ctx.lineJoin = "round";
			ctx.moveTo(190, 150);
			ctx.lineTo(230, 70);
			ctx.lineTo(270, 150);
			ctx.stroke();

			ctx.beginPath();
			ctx.lineJoin = "bevel";
			ctx.moveTo(340, 150);
			ctx.lineTo(380, 70);
			ctx.lineTo(420, 150);
			ctx.stroke();
					// miterLimit
			ctx.beginPath();
			ctx.lineJoin   = "miter";
			ctx.miterLimit = 5.0;
			ctx.moveTo(40, 300);
			ctx.lineTo(80, 220);
			ctx.lineTo(120, 300);
			ctx.stroke();

			ctx.beginPath();
			ctx.lineJoin   = "miter";
			ctx.miterLimit = 2.0;
			ctx.moveTo(190, 300);
			ctx.lineTo(230, 220);
			ctx.lineTo(270, 300);
			ctx.stroke();
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>線の接合箇所の処理</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="470" HEIGHT="340"></CANVAS>
</BODY>
</HTML>

      • 使用例19： プロパティ fillStyle を利用して，塗りつぶした円を描くと共に，メソッド createRadialGradient によって円状のグラデーションを描いている． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>塗りつぶしとグラデーション</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 460;   // キャンバス要素の幅
			canvas.height = 240;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 塗りつぶしの色
			ctx.beginPath();
			ctx.fillStyle = "rgb(0, 255, 0)";
			ctx.arc(120, 120, 100, 0, 2*Math.PI, false);
			ctx.fill();
					// グラデーション（中心から半径20までは赤，その後徐々に赤から青へ変化していく）
			ctx.beginPath();
			let gradient = ctx.createRadialGradient(340, 120, 20, 340, 120, 100);
			gradient.addColorStop(0.0, 'rgb(255, 0, 0)');
			gradient.addColorStop(0.5, 'rgb(0, 255, 0)');
			gradient.addColorStop(1.0, 'rgb(0, 0, 255)');
			ctx.fillStyle = gradient;
			ctx.arc(340, 120, 100, 0, 2*Math.PI, false);
			ctx.fill();
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>塗りつぶしとグラデーション</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="460" HEIGHT="240"></CANVAS>
</BODY>
</HTML>

      • 使用例20： プロパティ fillStyle とメソッド createPattern によって，矩形内の背景画像を設定している． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>背景パターン</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		img     = new Image();
		img.src = "ayame.gif";
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 300;   // キャンバス要素の幅
			canvas.height = 240;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 背景パターン
			let ptn = ctx.createPattern(img, 'repeat');
			ctx.fillStyle = ptn;
					// 矩形を描く
			ctx.fillRect(20, 20, 260, 200);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>背景パターン</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="300" HEIGHT="240"></CANVAS>
</BODY>
</HTML>

      • 使用例21： プロパティ lineWidth と strokeStyle を利用して，太さと色を変えた直線を描くと共に，メソッド createLinearGradient によって直線状のグラデーションを描いている． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>線の色とグラデーション</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 220;   // キャンバス要素の幅
			canvas.height = 140;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 線の色
			ctx.lineWidth = 40;
			ctx.strokeStyle = "rgb(0, 255, 0)";
			ctx.moveTo(20, 40);
			ctx.lineTo(200, 40);
			ctx.stroke();
					// グラデーション（左から0.3までの位置は緑，その後徐々に赤へ変化していく）
			ctx.beginPath();
			let gradient = ctx.createLinearGradient(20, 40, 200, 40);
    		gradient.addColorStop(0.3, 'rgb(0, 255, 0)');
    		gradient.addColorStop(1.0, 'rgb(255, 0, 0)');
			ctx.strokeStyle = gradient;
			ctx.moveTo(20, 100);
			ctx.lineTo(200, 100);
			ctx.stroke();
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>線の色とグラデーション</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="220" HEIGHT="140"></CANVAS>
</BODY>
</HTML>

      • 使用例22： プロパティ font，textBaseline，メソッド fillText，strokeText，textAlign を使用して，文字のフォント，文字スタイル，揃えなどを制御している． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>フォント，文字スタイル，揃え</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 600;   // キャンバス要素の幅
			canvas.height = 290;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// fill と stroke
			ctx.font = "30px 'ＭＳ ゴシック'";
			ctx.textBaseline = "alphabetic";
			ctx.fillText("30px，ＭＳ ゴシック，fill", 100, 40);
			ctx.strokeText("30px，ＭＳ ゴシック，stroke", 100, 80);
					// textAlign
			ctx.font = "20px 'ＭＳ ゴシック'";
			ctx.fillText("揃え位置の指定無し", 100, 120);
			ctx.textAlign = "start";
			ctx.fillText("start（デフォルト）", 100, 150);
			ctx.textAlign = "end";
			ctx.fillText("end", 100, 180);
			ctx.textAlign = "left";
			ctx.fillText("left", 100, 210);
			ctx.textAlign = "right";
			ctx.fillText("right", 100, 240);
			ctx.textAlign = "center";
			ctx.fillText("center", 100, 270);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>フォント，文字スタイル，揃え</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="600" HEIGHT="290"></CANVAS>
</BODY>
</HTML>

      • 使用例23： メソッド measureText を利用して，文字列の幅を取得している． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>テキストメトリックス</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 340;   // キャンバス要素の幅
			canvas.height = 140;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 描画
			ctx.font = "30px 'ＭＳ ゴシック'";
			ctx.fillText("No.1 文書", 20, 40);
			ctx.fillText("No.2 文書（長い）", 20, 80);
			let met1 = ctx.measureText("No.1 文書");
			let met2 = ctx.measureText("No.2 文書（長い）");
					// メトリックスの表示
			ctx.font = "20px 'ＭＳ ゴシック'";
			ctx.fillText("width : No.1 = " + met1.width + "，No.2 = " + met2.width, 20, 120);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>テキストメトリックス</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="340" HEIGHT="140"></CANVAS>
</BODY>
</HTML>

      • 使用例24： メソッド drawImage によって，画像の全体及びその一部を拡大して表示すると共に，メソッド getImageData，createImageData，putImageData を使用したピクセル操作によって，画像を上下反転して描いている． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>画像の描画とピクセル操作</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		img     = new Image();
		img.src = "ajisai.gif";
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 490;   // キャンバス要素の幅
			canvas.height = 540;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 画像の描画
			let width  = 232;
			let height = 241;
			ctx.drawImage(img, 20, 20, width, height);
			ctx.drawImage(img, 100, 0, 132, 80, 270, 20, 200, 120);   // 一部の表示（サイズも変更）
					// 画像を上下逆にして描画
			let old_d = ctx.getImageData(20, 20, width, height);
			let new_d = ctx.createImageData(width, height);
//			let new_d = ctx.createImageData(old_d);   // この方法でも良い
			for (let i1 = 0; i1 < height; i1++) {
				for (let i2 = 0; i2 < width; i2++) {
					new_d.data[(i2 * 4) + ((height - 1 - i1) * width * 4)] = old_d.data[(i2 * 4) + (i1 * width * 4)];
					new_d.data[1 + (i2 * 4) + ((height - 1 - i1) * width * 4)] = old_d.data[1 + (i2 * 4) + (i1 * width * 4)];
					new_d.data[2 + (i2 * 4) + ((height - 1 - i1) * width * 4)] = old_d.data[2 + (i2 * 4) + (i1 * width * 4)];
					new_d.data[3 + (i2 * 4) + ((height - 1 - i1) * width * 4)] = old_d.data[3 + (i2 * 4) + (i1 * width * 4)];
				}
			}
			ctx.putImageData(new_d, 20, 280);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>画像の描画とピクセル操作</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="490" HEIGHT="540"></CANVAS>
</BODY>
</HTML>

      • 使用例25： JavaScript にはフィルタ処理を行うメソッドが存在しない．この例では，メソッド getImageData，putImageData を使用したピクセル処理によってフィルタ機能を実現するためのメソッドを作成している．具体的な処理として”ぼかし”を表示しているが，パターンを変えることによって他のフィルタ処理も可能である．例えば，3 行 3 列のフィルタの例として以下のようなものが考えられる． → 表示とそのソースコード 
        /* ぼかし */
	1/9, 1/9, 1/9,
	1/9, 1/9, 1/9,
	1/9, 1/9, 1/9,

/* シャープ */
	-1, -1, -1,
	-1,  9, -1,
	-1, -1, -1,

/* エンボス（立体視） */
	 7,  0,  0,
	 0, -3,  0,
	 0,  0, -3,

/* エッジ */
	-1,  0,  1,
	-2,  0,  2,
	-1,  0,  1,
				
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>ぼかし</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		let img = new Image();
		img.src = "rect.gif";

		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 270;   // キャンバス要素の幅
			canvas.height = 130;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 元の画像
			let width = 100;
			let height = 100;
			ctx.drawImage(img, 20, 15, width, height);
					// ぼかし
			let img1 = ctx.getImageData(17, 12, width+6, height+6);
			let mx = new Array();
			for (let i1 = 0; i1 < 7; i1++) {
				mx[i1] = new Array();
				for (let i2 = 0; i2 < 7; i2++)
					mx[i1][i2] = 1.0 / 49.0;
			}
			let img2 = filter(ctx, img1, width+6, height+6, mx, 7, 7);
			ctx.putImageData(img2, 147, 12);
		}
					// フィルタ
		function filter(ctx, im1, width, height, mx, w, h)
		{
			let im2 = ctx.createImageData(width, height);
			let whf = Math.floor(w / 2);
			let hhf = Math.floor(h / 2);
			for (let i1 = 0; i1 < height; i1++) {
				for (let i2 = 0; i2 < width; i2++) {
					let v0 = 0.0, v1 = 0.0, v2 = 0.0, v3 = 0.0;
					let k = (i1 * width + i2) * 4;
					for (let i3 = 0; i3 < h; i3++) {
						let k1 = i1 - hhf + i3;
						if (k1 < 0)
							k1 = 0;
						for (let i4 = 0; i4 < w; i4++) {
							let k2 = i2 - whf + i4;
							if (k2 < 0)
								k2 = 0;
							let kk = (k1 * width + k2) * 4;
							v0 += im1.data[kk] * mx[i3][i4];
							v1 += im1.data[kk+1] * mx[i3][i4];
							v2 += im1.data[kk+2] * mx[i3][i4];
							v3 += im1.data[kk+3] * mx[i3][i4];
						}
					}
					if (v0 < 0)
						v0 = 0;
					else if (v0 > 255)
						v0 = 255;
					if (v1 < 0)
						v1 = 0;
					else if (v1 > 255)
						v1 = 255;
					if (v2 < 0)
						v2 = 0;
					else if (v2 > 255)
						v2 = 255;
					if (v3 < 0)
						v3 = 0;
					else if (v3 > 255)
						v3 = 255;
					im2.data[k]     = Math.floor(v0);
					im2.data[k + 1] = Math.floor(v1);
					im2.data[k + 2] = Math.floor(v2);
					im2.data[k + 3] = Math.floor(v3);
				}
			}
			return im2;
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>ぼかし</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="270" HEIGHT="130"></CANVAS>
</BODY>
</HTML>

      • 使用例26： プロパティ shadowColor，shadowOffsetX，shadowOffsetY，shadowBlur を使用して，矩形に影を付加している． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>影の付加</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas        = document.getElementById('canvas_e');
			canvas.width      = 280;   // キャンバス要素の幅
			canvas.height     = 120;   // キャンバス要素の高さ
			let ctx           = canvas.getContext('2d');
			ctx.fillStyle     = "rgb(0, 0, 255)";
			ctx.shadowColor   = "rgb(0, 255, 0)";

			ctx.shadowOffsetX = 5;
			ctx.shadowOffsetY = 5;
			ctx.shadowBlur    = 5;
			ctx.fillRect(20, 20, 100, 50);

			ctx.shadowOffsetX = 20;
			ctx.shadowOffsetY = 20;
			ctx.shadowBlur    = 20;
			ctx.fillRect(140, 20, 100, 50);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>影の付加</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="280" HEIGHT="120"></CANVAS>
</BODY>
</HTML>

      • 使用例27： プロパティ globalAlpha によって，透明度を変化させている． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>透明度</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas      = document.getElementById('canvas_e');
			canvas.width    = 190;   // キャンバス要素の幅
			canvas.height   = 115;   // キャンバス要素の高さ
			let ctx         = canvas.getContext('2d');
			ctx.globalAlpha = 1.0;
			ctx.fillStyle   = "rgb(0, 255, 0)";
			ctx.fillRect(20, 20, 100, 50);
			ctx.globalAlpha = 0.5;
			ctx.fillStyle   = "rgb(255, 0, 0)";
			ctx.fillRect(70, 45, 100, 50);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>透明度</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="190" HEIGHT="115"></CANVAS>
</BODY>
</HTML>

      • 使用例28： メソッド globalCompositeOperation の source-atop 属性を使用した描画と通常の描画（右側 source-over ）とを比較している． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>合成方法（ source-atop ）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 360;   // キャンバス要素の幅
			canvas.height = 115;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 合成（ source-atop ）
			ctx.fillStyle = "rgb(0, 255, 0)";
			ctx.fillRect(20, 20, 100, 50);
			ctx.globalCompositeOperation = "source-atop";
			ctx.fillStyle = "rgb(255, 0, 0)";
			ctx.fillRect(70, 45, 100, 50);
					// 合成（ source-over：デフォルト）
			ctx.globalCompositeOperation = "source-over";
			ctx.fillStyle = "rgb(0, 255, 0)";
			ctx.fillRect(190, 20, 100, 50);
			ctx.fillStyle = "rgb(255, 0, 0)";
			ctx.fillRect(240, 45, 100, 50);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>合成方法（ source-atop ）</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="360" HEIGHT="115"></CANVAS>
</BODY>
</HTML>

      • 使用例29： メソッド globalCompositeOperation の source-in 属性を使用した描画と通常の描画（右側 source-over ）とを比較している． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>合成方法（ source-in ）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 360;   // キャンバス要素の幅
			canvas.height = 115;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 合成（ source-in ）
			ctx.fillStyle = "rgb(0, 255, 0)";
			ctx.fillRect(20, 20, 100, 50);
			ctx.globalCompositeOperation = "source-in";
			ctx.fillStyle = "rgb(255, 0, 0)";
			ctx.fillRect(70, 45, 100, 50);
					// 合成（ source-over：デフォルト）
			ctx.globalCompositeOperation = "source-over";
			ctx.fillStyle = "rgb(0, 255, 0)";
			ctx.fillRect(190, 20, 100, 50);
			ctx.fillStyle = "rgb(255, 0, 0)";
			ctx.fillRect(240, 45, 100, 50);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>合成方法（ source-in ）</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="360" HEIGHT="115"></CANVAS>
</BODY>
</HTML>

      • 使用例30： メソッド globalCompositeOperation の source-out 属性を使用した描画と通常の描画（右側 source-over ）とを比較している． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>合成方法（ source-out ）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 360;   // キャンバス要素の幅
			canvas.height = 115;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 合成（ source-out ）
			ctx.fillStyle = "rgb(0, 255, 0)";
			ctx.fillRect(20, 20, 100, 50);
			ctx.globalCompositeOperation = "source-out";
			ctx.fillStyle = "rgb(255, 0, 0)";
			ctx.fillRect(70, 45, 100, 50);
					// 合成（ source-over：デフォルト）
			ctx.globalCompositeOperation = "source-over";
			ctx.fillStyle = "rgb(0, 255, 0)";
			ctx.fillRect(190, 20, 100, 50);
			ctx.fillStyle = "rgb(255, 0, 0)";
			ctx.fillRect(240, 45, 100, 50);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>合成方法（ source-out ）</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="360" HEIGHT="115"></CANVAS>
</BODY>
</HTML>

      • 使用例31： メソッド globalCompositeOperation の source-over 属性を使用した描画と通常の描画（右側 source-over ）とを比較している． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>合成方法（ source-over ）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 360;   // キャンバス要素の幅
			canvas.height = 115;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 合成（ source-over ）
			ctx.fillStyle = "rgb(0, 255, 0)";
			ctx.fillRect(20, 20, 100, 50);
			ctx.globalCompositeOperation = "source-over";
			ctx.fillStyle = "rgb(255, 0, 0)";
			ctx.fillRect(70, 45, 100, 50);
					// 合成（ source-over：デフォルト）
			ctx.globalCompositeOperation = "source-over";
			ctx.fillStyle = "rgb(0, 255, 0)";
			ctx.fillRect(190, 20, 100, 50);
			ctx.fillStyle = "rgb(255, 0, 0)";
			ctx.fillRect(240, 45, 100, 50);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>合成方法（ source-over ）</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="360" HEIGHT="115"></CANVAS>
</BODY>
</HTML>

      • 使用例32： メソッド globalCompositeOperation の destination-atop 属性を使用した描画と通常の描画（右側 source-over ）とを比較している． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>合成方法（ destination-atop ）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 360;   // キャンバス要素の幅
			canvas.height = 115;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 合成（ destination-atop ）
			ctx.fillStyle = "rgb(0, 255, 0)";
			ctx.fillRect(20, 20, 100, 50);
			ctx.globalCompositeOperation = "destination-atop";
			ctx.fillStyle = "rgb(255, 0, 0)";
			ctx.fillRect(70, 45, 100, 50);
					// 合成（ source-over：デフォルト）
			ctx.globalCompositeOperation = "source-over";
			ctx.fillStyle = "rgb(0, 255, 0)";
			ctx.fillRect(190, 20, 100, 50);
			ctx.fillStyle = "rgb(255, 0, 0)";
			ctx.fillRect(240, 45, 100, 50);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>合成方法（ destination-atop ）</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="360" HEIGHT="115"></CANVAS>
</BODY>
</HTML>

      • 使用例33： メソッド globalCompositeOperation の destination-in 属性を使用した描画と通常の描画（右側 source-over ）とを比較している． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>合成方法（ destination-in ）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 360;   // キャンバス要素の幅
			canvas.height = 115;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 合成（ destination-in ）
			ctx.fillStyle = "rgb(0, 255, 0)";
			ctx.fillRect(20, 20, 100, 50);
			ctx.globalCompositeOperation = "destination-in";
			ctx.fillStyle = "rgb(255, 0, 0)";
			ctx.fillRect(70, 45, 100, 50);
					// 合成（ source-over：デフォルト）
			ctx.globalCompositeOperation = "source-over";
			ctx.fillStyle = "rgb(0, 255, 0)";
			ctx.fillRect(190, 20, 100, 50);
			ctx.fillStyle = "rgb(255, 0, 0)";
			ctx.fillRect(240, 45, 100, 50);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>合成方法（ destination-in ）</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="360" HEIGHT="115"></CANVAS>
</BODY>
</HTML>

      • 使用例34： メソッド globalCompositeOperation の destination-out 属性を使用した描画と通常の描画（右側 source-over ）とを比較している． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>合成方法（ destination-out ）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 360;   // キャンバス要素の幅
			canvas.height = 115;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 合成（ destination-out ）
			ctx.fillStyle = "rgb(0, 255, 0)";
			ctx.fillRect(20, 20, 100, 50);
			ctx.globalCompositeOperation = "destination-out";
			ctx.fillStyle = "rgb(255, 0, 0)";
			ctx.fillRect(70, 45, 100, 50);
					// 合成（ source-over：デフォルト）
			ctx.globalCompositeOperation = "source-over";
			ctx.fillStyle = "rgb(0, 255, 0)";
			ctx.fillRect(190, 20, 100, 50);
			ctx.fillStyle = "rgb(255, 0, 0)";
			ctx.fillRect(240, 45, 100, 50);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>合成方法（ destination-out ）</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="360" HEIGHT="115"></CANVAS>
</BODY>
</HTML>

      • 使用例35： メソッド globalCompositeOperation の destination-over 属性を使用した描画と通常の描画（右側 source-over ）とを比較している． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>合成方法（ destination-over ）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 360;   // キャンバス要素の幅
			canvas.height = 115;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 合成（ destination-over ）
			ctx.fillStyle = "rgb(0, 255, 0)";
			ctx.fillRect(20, 20, 100, 50);
			ctx.globalCompositeOperation = "destination-over";
			ctx.fillStyle = "rgb(255, 0, 0)";
			ctx.fillRect(70, 45, 100, 50);
					// 合成（ source-over：デフォルト）
			ctx.globalCompositeOperation = "source-over";
			ctx.fillStyle = "rgb(0, 255, 0)";
			ctx.fillRect(190, 20, 100, 50);
			ctx.fillStyle = "rgb(255, 0, 0)";
			ctx.fillRect(240, 45, 100, 50);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>合成方法（ destination-over ）</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="360" HEIGHT="115"></CANVAS>
</BODY>
</HTML>

      • 使用例36： メソッド globalCompositeOperation の lighter 属性を使用した描画と通常の描画（右側 source-over ）とを比較している． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>合成方法（ lighter ）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 360;   // キャンバス要素の幅
			canvas.height = 115;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 合成（ lighter ）
			ctx.fillStyle = "rgb(0, 255, 0)";
			ctx.fillRect(20, 20, 100, 50);
			ctx.globalCompositeOperation = "lighter";
			ctx.fillStyle = "rgb(255, 0, 0)";
			ctx.fillRect(70, 45, 100, 50);
					// 合成（ source-over：デフォルト）
			ctx.globalCompositeOperation = "source-over";
			ctx.fillStyle = "rgb(0, 255, 0)";
			ctx.fillRect(190, 20, 100, 50);
			ctx.fillStyle = "rgb(255, 0, 0)";
			ctx.fillRect(240, 45, 100, 50);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>合成方法（ lighter ）</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="360" HEIGHT="115"></CANVAS>
</BODY>
</HTML>

      • 使用例37： メソッド globalCompositeOperation の copy 属性を使用した描画と通常の描画（右側 source-over ）とを比較している． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>合成方法（ copy ）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 360;   // キャンバス要素の幅
			canvas.height = 115;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 合成（ copy ）
			ctx.fillStyle = "rgb(0, 255, 0)";
			ctx.fillRect(20, 20, 100, 50);
			ctx.globalCompositeOperation = "copy";
			ctx.fillStyle = "rgb(255, 0, 0)";
			ctx.fillRect(70, 45, 100, 50);
					// 合成（ source-over：デフォルト）
			ctx.globalCompositeOperation = "source-over";
			ctx.fillStyle = "rgb(0, 255, 0)";
			ctx.fillRect(190, 20, 100, 50);
			ctx.fillStyle = "rgb(255, 0, 0)";
			ctx.fillRect(240, 45, 100, 50);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>合成方法（ copy ）</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="360" HEIGHT="115"></CANVAS>
</BODY>
</HTML>

      • 使用例38： メソッド globalCompositeOperation の xor 属性を使用した描画と通常の描画（右側 source-over ）とを比較している． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>合成方法（ xor ）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 360;   // キャンバス要素の幅
			canvas.height = 115;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 合成（ xor ）
			ctx.fillStyle = "rgb(0, 255, 0)";
			ctx.fillRect(20, 20, 100, 50);
			ctx.globalCompositeOperation = "xor";
			ctx.fillStyle = "rgb(255, 0, 0)";
			ctx.fillRect(70, 45, 100, 50);
					// 合成（ source-over：デフォルト）
			ctx.globalCompositeOperation = "source-over";
			ctx.fillStyle = "rgb(0, 255, 0)";
			ctx.fillRect(190, 20, 100, 50);
			ctx.fillStyle = "rgb(255, 0, 0)";
			ctx.fillRect(240, 45, 100, 50);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>合成方法（ xor ）</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="360" HEIGHT="115"></CANVAS>
</BODY>
</HTML>

      • 使用例39： 塗りつぶされた矩形は，メソッド scale を使用して，横軸を 1/2，縦軸を 2 倍したものになっている． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>変形（拡大縮小）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 160;   // キャンバス要素の幅
			canvas.height = 160;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 拡大縮小する前の図形
			ctx.strokeRect(40, 20, 100, 50);
					// 横軸を1/2，縦軸を2倍
			ctx.scale(0.5, 2);
			ctx.fillRect(40, 20, 100, 50);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>変形（拡大縮小）</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="160" HEIGHT="160"></CANVAS>
</BODY>
</HTML>

      • 使用例40： 塗りつぶされた矩形は，メソッド rotate によって，座標軸を反時計方向に 20 度回転したものである． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>変形（座標軸を反時計方向に20度回転）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 160;   // キャンバス要素の幅
			canvas.height = 130;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 回転する前の図形
			ctx.strokeRect(40, 20, 100, 50);
					// 座標軸を反時計方向に 20 度回転
			ctx.rotate(20*Math.PI/180);
			ctx.fillRect(40, 20, 100, 50);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>変形（座標軸を反時計方向に 20 度回転）</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="160" HEIGHT="130"></CANVAS>
</BODY>
</HTML>

      • 使用例41： 塗りつぶされた矩形は，メソッド translate によって，座標軸を (20, 70) に移動したものである． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>変形（座標軸の移動）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 160;   // キャンバス要素の幅
			canvas.height = 160;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 移動する前の図形
			ctx.strokeRect(20, 20, 100, 50);
					// 座標軸の移動
			ctx.translate(20, 70);
			ctx.fillRect(20, 20, 100, 50);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>変形（座標軸の移動）</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="160" HEIGHT="160"></CANVAS>
</BODY>
</HTML>

      • 使用例42： メソッド transform 及び setTransform を使用して，反時計回り（黒の矩形），及び，時計回り（緑の矩形）に座標軸を 20 度回転している． → 表示とそのソースコード 
        <!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>変形（変換マトリックスによる回転）</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function draw() {
			let canvas    = document.getElementById('canvas_e');
			canvas.width  = 180;   // キャンバス要素の幅
			canvas.height = 150;   // キャンバス要素の高さ
			let ctx       = canvas.getContext('2d');
					// 回転する前の図形
			ctx.strokeRect(40, 50, 100, 50);
					// 座標軸を反時計回りに20度回転
			let ang = 20 * Math.PI / 180;
			let a   = Math.cos(ang);
			let b   = Math.sin(ang);
			let c   = -Math.sin(ang);
			let d   = Math.cos(ang);
			ctx.transform(a, b, c, d, 0, 0);
			ctx.fillRect(40, 50, 100, 50);
					// 座標軸を時計回りに20度回転
			ang = -20 * Math.PI / 180;
			a   = Math.cos(ang);
			b   = Math.sin(ang);
			c   = -Math.sin(ang);
			d   = Math.cos(ang);
			ctx.setTransform(a, b, c, d, 0, 0);
			ctx.fillStyle = "rgb(0, 255, 0)";
			ctx.fillRect(40, 50, 100, 50);
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" STYLE="text-align: center" onLoad="draw()">
	<H1>変形（変換マトリックスによる回転）</H1>
	<CANVAS ID="canvas_e" STYLE="background-color: #eeffee;" WIDTH="180" HEIGHT="150"></CANVAS>
</BODY>
</HTML>

静岡理工科大学 菅沼ホーム JavaScript 目次 索引