↑ホーム（よかひよかとき） へ

　 　使用頻度大のものをコピー&ペーストで使えるよう 「覚え書」 としたものです。 参考になれば喜。 動作確認は自責で。
　 JavaScript の覚え書 　 Javaアプレット の覚え書 　 Python の覚え書 　 Perl の覚え書
　 おもちゃ箱---HTML5作品(JavaScript)、Javaアプレット作品、Python作品 を多数置いています

よかひよかときの　JavaScript の覚え書　　　　.
■コメント文
■小数点以下の処理
■算術演算(商、余り、大きい方、小さい方、絶対値、べき乗、平方根、指数、対数)
■乱数を発生

■for文
■switch文
■繰り返し(ループ)やブロックから抜け出す

■テキスト表示
■文字列の比較
■文字列の検索
■文字列から１文字だけを抜き出す
■文字列から何文字か抜き出す
■文字列を分割する（結果を配列として返す）
■文字列の置換

■今日の日付を取得する
■現在の時刻を取得する

■数字を数値に変換
■数式を数値に変換（数式を与えると数値を返す）

■ファイル読み込み（ファイルからデータを入力）

■文字列の表示（innerHTML の方法）
■文字列の表示（fillText の方法）

■図形を描く
■画像を読み込んで表示する
■図形や画像を任意の点のまわりに回転する

■画像や図形のピクセル値を取得する
■ピクセル操作

■一定時間待って実行する


■コメント文　　 ◆このページのトップへ 説明更新日
JavaScript //　または　/*　　　*/

 ○ その行の // より後ろに記述された部分はコメントになる。
○ /* と */ で挟まれた部分はコメントになる。複数行になるコメントのときはこちらを使用する。
（なお、HTMLでのコメントは、<!--　　　-->。また、スタイルシートでのコメントは、/*　　　*/。） 		2006.12.30
■小数点以下の処理　　 ◆このページのトップへ 説明更新日
JavaScript （例）
var a=13.64; // 正の数のとき
x=Math.ceil(a);
x=Math.floor(a);
x=Math.round(a);

a=-13.64; // 負の数のとき
x=Math.ceil(a);
x=Math.floor(a);
x=Math.round(a);

a=-13.51;
x=Math.round(a);
a=-13.5;
x=Math.round(a);
a=-13.49;
x=Math.round(a);

切り上げる。x=14 になる。
切り捨てる。x=13 になる。
四捨五入する。x=14 になる。


x=-13 になる。
x=-14 になる。
x=-14 になる。

(注意：Math.round(負数) の場合には特に注意)
x=-14 になる。

x=-13 になる（-14 にはならない！）。

x=-13 になる。
 2006.12.30
■算術演算(商、余り、大きい方、小さい方、絶対値、べき乗、平方根、指数、対数)　　 ◆このページのトップへ 説明更新日
JavaScript （例）
var a=7;
var b=3;
var x;
x=a/b; // aをbで割った商を求める。
x=a%b; // aをbで割ったときの余りを求める。
x=Math.max(a, b); // aとbの値のうち大きい方の値を求める。
x=Math.min(a, b); // aとbの値のうち小さい方の値を求める。
x=Math.abs(b-a); // 絶対値を求める。

var c=3;
var d=4;
y=Math.pow(c,d); // cのd乗を求める。
y=Math.sqrt(c); // cの平方根を求める。
y=Math.exp(c); // 自然対数の底eのc乗を求める。
y=Math.log(c); // cの自然対数値を求める。



x=2.3333333333333335 になる。
x=1 になる。
x=7 になる。
x=3 になる。
x=4 になる。



y=81 になる。
y=1.7320508075688772 になる。
y=20.085536923187668 になる。
y=1.0986122886681097 になる。

 2006.12.30
■乱数を発生　　 ◆このページのトップへ 説明更新日
JavaScript Math.random()

（例）
1,2,3,4,5 内で乱数を得るには
var x=1+Math.floor(Math.random()*5);


Math.random() は、0以上1未満のランダムな小数値を返すので、それを 5倍し Math.floor で小数点以下を切り捨てて整数にすると、0から4までの乱数を得る。それに1を加える。

 2006.12.30
■for文　　 ◆このページのトップへ 説明更新日
JavaScript （例）
for(var i=0; i<=5; i++)
{

}
2006.12.30
■switch文　　 ◆このページのトップへ 説明更新日
JavaScript 

switch()
{
	case 0: …; break;
	case 1: …; break;
	・
	・
	・
	default: …;
}

（例）
var weeks=["日", "月", "火", "水", "木", "金", "土"];
var now=new Date();
var wday=now.getDay(); // 曜日の取得
switch(wday)
{
	case 0:
		document.write("今日は日曜日で休みです。");
		break;
	case 6:
		document.write("今日は土曜日で休みです。");
		break;
	default:
		document.write("今日は"+weeks[wday]+"曜日です。");
}









default はどれにも当てはまらない場合の処理（省略可能）。
 2006.12.30
■繰り返し(ループ)やブロックから抜け出す　　 ◆このページのトップへ 説明更新日
JavaScript 
（例）
var k=0;
for(var i=0; i<=10; i++)
{
	k++;
	if(k>3) break;
}


○ for, while, do などの繰り返し処理や、 switch による分岐から抜け出す。
　 なお、continue を用いると、繰り返しをそこでスキップし処理の先頭に戻る。 		2006.12.30
■テキスト表示　　　◆このページのトップへ 説明更新日
JavaScript （例）
var a=13.64;
document.write("a="+a+"<br>");
document.write("こんにちは。<br>");

a=13.64
こんにちは。
 2006.12.30
■文字列の比較　　 ◆このページのトップへ 説明更新日
JavaScript if("文字列０"=="文字列１"){ }
if("文字列０"!="文字列１"){ }
（例）
var str0="おはよう";
if(str0=="おはよう")
{
	document.write("str0 は、おはよう です。");
}
else
{
	document.write("str0 は、おはよう ではありません。");
}

文字列０ と 文字列１ が同じなら｛　　｝。
文字列０ と 文字列１ が異なるなら｛　　｝。

 2007.01.01
■文字列の検索　　 ◆このページのトップへ 説明更新日
JavaScript 文字列.indexOf("検索文字", 検索開始位置);
文字列.lastIndexOf("検索文字", 検索開始位置);

（例）
var n;
var str="abcdABCDabcdABCD";

n=str.indexOf("ABC", 5);
n=str.indexOf("ABC");

n=str.lastIndexOf("ABC", 5);
n=str.lastIndexOf("ABC");

 検索開始位置から後ろへ検索し、最初に出現する位置を返す。
検索開始位置から前へ検索し、最初に出現する位置を返す。





n=12 になる。
n=4 になる。 検索開始位置を省略すると、最初から検索する。

n=4 になる。
n=12 になる。 検索開始位置を省略すると、最後尾から検索する。

○ 先頭の文字が 0番目。
○ 検索して見つからなければ -1 を返す。

 2006.12.30
■文字列から１文字だけを抜き出す　　 ◆このページのトップへ 説明更新日
JavaScript 文字列.charAt(抜き出す文字の位置)

（例）
var data="ABCDEFGHI";
var text=data.charAt(4);



text には、4番目の文字 ”E” が代入される。
　（ 先頭の文字は 0番目)

 2006.12.30
■文字列から何文字か抜き出す　　 ◆このページのトップへ 説明更新日
JavaScript 文字列.substr(開始文字の位置、抜き出す文字の個数)

（例）
var data="ABCDEFGHI";
var text=data.substr(4, 3);


文字列.substring(開始文字の位置（ここから）, 最終文字の次位置（ここの前まで）)

（例）
var data="ABCDEFGHI";
var text=data.substring(4, 7);



text には、4番目～6番目の ”EFG” が代入される。（ 先頭の文字は 0番目)






text には、4番目～6番目の ”EFG” が代入される。（ 先頭の文字は 0番目)

○ 抜き出す文字の個数 や、最終前文字の位置を省略すれば、最後尾までになる。

 2006.12.30
■文字列を分割する（結果を配列として返す）　　 ◆このページのトップへ 説明更新日
JavaScript 文字列.split("分割文字")

（例）
var text=new Array();
var data="今日は、晴れています。";
text=data.split("、");



○ 文字列が ”、” で分割され、結果を配列にして返す。結果として
text[0]="今日は";
text[1]="晴れています。";
になっている。

 2006.12.30
■文字列の置換　　 ◆このページのトップへ 説明更新日
JavaScript (文字列０.split("文字列１")).join("文字列２");

（例）
var str="abcdABCDabcdABCD";
str=(str.split("ABC")).join("12");

 文字列０ の中のすべての 文字列１ を 文字列２ に置き換える。


str の中のすべての ”ABC” を ”12” に置き換える。その結果
str="abcd12Dabcd12D" になる。

○ 文字列 str を ”ABC” で分割し、それらを ”12” で連結する方法である。

 2006.12.30
■今日の日付を取得する　　 ◆このページのトップへ 説明更新日
JavaScript （例）
var today=new Date();
var year=today.getFullYear(); // 年の取得
var month=today.getMonth()+1; // 月の取得
var day=today.getDate(); // 日の取得
var wday=today.getDay(); // 曜日の取得
var weeks=new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
var week=weeks[wday];
 document.write("今日は ",year," 年 ",month," 月 ",day," 日（", week,"）です。");






○ このまま使うと
今日は 2006 年 12 月 30 日（Sat）です。
のようになる。

 2006.12.30
■現在の時刻を取得する　　 ◆このページのトップへ 説明更新日
JavaScript （例）
var today = new Date();
var hour = today.getHours();
var min = today.getMinutes();
var sec = today.getSeconds();
document.write("現在 ",hour," 時 ",min," 分 ",sec," 秒 です。");

ミリ秒は
var millisec = today.getMilliseconds();





○ このまま使うと
現在 16 時 13 分 44 秒 です。
のようになる。

 2006.12.30
■数字を数値に変換　　 ◆このページのトップへ 説明更新日
JavaScript parseFloat("数字");
parseInt("数字" , 進数);


（例）
var n=parseFloat("1.23");

var n=parseInt("2.56");
var n=parseInt("325ab");
var n=parseInt("ab325");
var n=parseInt("11", 2);
var n=parseInt("a", 16);
var n=parseInt("0xff");
var n=parseInt("012");

 数字（文字列）を数値に変換する。
数字（文字列）を整数値に変換する。小数点以下は切り捨てる。
　（進数を省略すれば 10進数とみなされる。ただし、0xで始めれば16進数、0で始めれば8進数としてみなされる）


n=1.23 になる。

n=2 になる。 10進数の 2.56 とみなされ、その整数値が返される。
n=325 になる。 10進数 の325ab とみなされるが、aが変換できないので。
n=NaN になる。 10進数 のab325 とみなされるが、先頭のaが変換できないので。
n=3 になる。 2進数の 11 は、10進数で 3 だから。
n=10 になる。 16進数の a は、10進数で 10 だから。
n=255 になる。 0x で始まってるので16進数とみなされる。
n=10 になる。 0 で始まっているので8進数とみなされる。


○ eval()関数を用いて、 n=eval("1.23"); としても n=1.23 になる。
○ 逆に 数値を数字（文字列）に変換するには、
var a=123;
a=""+a; // a="123" （文字列）になる。

 2007.01.02
■数式を数値に変換（数式を与えると数値を返す）　　 ◆このページのトップへ 説明更新日
JavaScript eval("数式")









（例）
var x=0.2;
var equation="Math.sin(x)+Math.pow(x, 2)-3*x+1";
var y=eval(equation);
数式には、 数字、演算子（*, /, +, -）および 次の数学関数(Math)が使用できる。
Math.random()Math.ceil()Math.floor()Math.round()Math.abs()
Math.sin()Math.cos()Math.tan()Math.asin()Math.acos()
Math.atan()Math.atan2(,)Math.PIMath.max(,)Math.min(,)
Math.pow(,)Math.sqrt()Math.SQRT2Math.SQRT1_2Math.E
Math.LN2Math.LN10Math.LOG2EMath.LOG10EMath.exp()
Math.log()　　　　


y=0.6386693307950612　になる。
　（Math.sin(0.2)+Math.pow(0.2, 2)-3*0.2+1 の計算値を返す）

 2007.01.01
■ファイル読み込み（ファイルからデータを入力）　　 ◆このページのトップへ 更新日
JavaScript 　別ファイル （ファイル名.js） にスクリプト部分だけを記述しておき、HTML文書に読み込む。スクリプトを埋め込みたい部分に
<script language="JavaScript" src="ファイル名.js"></script>
と記述しておく。

（例）
　別ファイルとして、datafile.js 名で

<!--
var data1="今日は雨だった。";
var data2="明日は晴れるだろう。";
//-->

を作成しておく。
　一方、HTMLファイルの適当なところに

<script language="JavaScript" src="datafile.js"></script>

を記述しておけば、data1、data2 が読み込まれる。よって、例えば

<script language="JavaScript">
<!--
document.write(data1+"<br>");
document.write(data2);
//-->
</script>

とすれば、

今日は雨だった。
明日は晴れるだろう。

のように表示される。

 2006.12.30
■文字列の表示（innerHTML の方法）　　 ◆このページのトップへ 更新日
JavaScript （例） 

<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body bgcolor="#ffffff">

document.write('<div id="mytext0" style="position:absolute;left:100px;top:40px;width:300px;height:30px;"></div>');
<script>
	var tex0=document.getElementById("mytext0");

	// ■文字列の表示-------------------------------

	tex0.style.width=260+"px";		// 幅
	tex0.style.height=30+"px";		// 高さ
	tex0.style.left=220+"px";		// x位置
	tex0.style.top=(200+20)+"px";		// y位置
	tex0.style.textAlign="center";		// 文字列配置位置
	tex0.style.color="#ff0000";		// 色
	tex0.style.backgroundColor="#ffffcc";	// 背景色
	tex0.style.textDecoration="underline";	// 下線を付ける
	tex0.style.fontStyle="italic";		// 斜体にする
	tex0.style.fontFamily="HG正楷書体-PRO";	// フォントファミリー
	tex0.style.fontSize=16+"px";		// フォントサイズ
	tex0.style.fontWeight="bold";		// 太文字 ( 通常は "normal" )
	tex0.innerHTML="こんにちは！";		// 表示する文字列
</script>
2018. 5. 1
■文字列の表示（fillText の方法）　　 ◆このページのトップへ 更新日
JavaScript 　数多く文字列を表示したいときは、こちらの方が便利である。

（例） 

<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body bgcolor="#ffffff">

document.write("<canvas id='mycanvas' style='background-color:#ffffcc;' width='600' height='400'></canvas>");
<script>
	var canvas=document.getElementById("mycanvas");
	var fg0=canvas.getContext("2d");

	// ■文字列の表示-------------------------------
	fg0.fillStyle="#ff0000";		// 色
	fg0.font="bold 16pt HG正楷書体-PRO";	// 太字 サイズ ファミリー
	fg0.textBaseline="middle";		// 配置縦位置(top,hanging,middle,alphabetic,ideographic,bottom)
	fg0.textAlign="center";			// 配置横位置(start,end,left,right,center)
	fg0.fillText("こんにちは！",120,150);	// 表示する文字列,x位置,y位置


	fg0.strokeStyle="#000000";		// 色
	fg0.font="italic 20px Arial";		// 斜体 サイズ ファミリー
	fg0.textBaseline="middle";		// 配置縦位置(top,hanging,middle,alphabetic,ideographic,bottom)
	fg0.textAlign="left";			// 配置横位置(start,end,left,right,center)
	fg0.strokeText("こんばんは！",120,200);	// 輪郭線の表示する文字列,x位置,y位置

</script>
2019. 5. 9
■図形を描く　　 ◆このページのトップへ 更新日
JavaScript （例） 

<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body bgcolor="#ffffff">

document.write("<canvas id='mycanvas' style='background-color:#ffffcc;' width='600' height='400'></canvas>");
<script>
	var canvas=document.getElementById("mycanvas");
	var fg0=canvas.getContext("2d");

	// ■直線を引く-------------------------------
	fg0.beginPath();
	fg0.moveTo(30,140);
	fg0.lineTo(130,280);
	fg0.closePath();		// (これがなければ 開いた直線になる）
	fg0.lineWidth=3;		// 線の太さ
	fg0.strokeStyle="#ff0000";	// 線色
					// fg0.strokeStyle="rgb(255,0,0)"; でもよい
					// ●（なぜか "rgb(cr,cb,cb)" のような変数はだめ？）
					// fg0.strokeStyle="rgba(255,0,0,0.4)"; 透明度は 0～1.0
	fg0.stroke();			// これで canvas上に描画することになる


	fg0.globalAlpha=0.4;		// 透明度は このように設定することもできるが、以降がすべてこの透明度
					// になるので要注意●
	fg0.globalAlpha=1.0;		// 透明度を戻しておく


	// ■長方形を描く-----------------------------
	fg0.strokeStyle="#ffcccc";
	fg0.lineWidth=5;
	fg0.strokeRect(0,10,150,50);


	// ■塗りつぶした長方形を描く-----------------
	fg0.fillStyle="#00bfff";
	fg0.fillRect(20,10,50,100);


	// ■多角形を描く-------------------------------
	fg0.beginPath();
	fg0.moveTo(240,40);
	fg0.lineTo(440,80);
	fg0.lineTo(380,220);
	fg0.closePath();		// これで終点から始点に閉じる
	fg0.lineWidth=1;
	fg0.strokeStyle="#00aa00";
	fg0.stroke();


	// ■塗りつぶした矩形を描く-------------------
	fg0.beginPath();
	fg0.moveTo(240,340);
	fg0.lineTo(440,380);
	fg0.lineTo(380,520);
	fg0.closePath();
	fg0.fillStyle="#ff00ff";
	fg0.fill();


	// ■円弧を描く-------------------------------
	fg0.beginPath();
	fg0.arc(600,100,80,Math.PI/180*45,Math.PI/180*135,false); // 中心座標x,y,半径,開始角,終了角,false:時計回り
	fg0.lineWidth=3;
	fg0.strokeStyle="#0000ff";
	fg0.stroke();


	// ■塗りつぶした円弧を描く-------------------
	fg0.beginPath();
	fg0.arc(800,100,80,Math.PI/180*45,Math.PI/180*135,false); // 中心座標x,y,半径,開始角,終了角,false:時計回り
	fg0.lineWidth=3;
	fg0.fillStyle="#00ff00";
	fg0.fill();


	// ■円を描く---------------------------------
	fg0.beginPath();
	fg0.arc(600,400,80,0,Math.PI*2,false); // 中心座標x,y,半径,開始角,終了角,false:時計回り
	fg0.lineWidth=3;
	fg0.strokeStyle="#ff6666";
	fg0.stroke();


	// ■塗りつぶした円を描く---------------------
	fg0.beginPath();
	fg0.arc(800,400,80,0,Math.PI*2,false); // 中心座標x,y,半径,開始角,終了角,false:時計回り
	fg0.lineWidth=3;
	fg0.fillStyle="#777700";
	fg0.fill();


	// (横縦のｽｹｰﾙを変えれば楕円になる。伴って位置もｽｹｰﾙされるので注意)
	// ■楕円を描く-------------------------------
	fg0.beginPath();
	fg0.scale(1,0.6);
	fg0.lineWidth=1;
	fg0.strokeStyle="#0000ff";
	fg0.arc(200,900,80,0,Math.PI*2,false); // 中心座標x,y,半径,開始角,終了角,false:時計回り
	fg0.stroke();


	// ■塗りつぶした楕円を描く---------------------
	fg0.beginPath();
	fg0.scale(1.5,0.8);
	fg0.lineWidth=10;
	fg0.strokeStyle="#005500";
	fg0.fillStyle="#00ffff";
	fg0.arc(350,1200,80,0,Math.PI*2,false); // 中心座標x,y,半径,開始角,終了角,false:時計回り
	fg0.stroke();
	fg0.fill();


	fg0.rotate(30*Math.PI/180);			// 回転させる
	fg0.fillStyle="#000000";
	fg0.beginPath();
	fg0.moveTo(240,340);
	fg0.lineTo(440,380);
	fg0.lineTo(380,520);
	fg0.closePath();
	fg0.fill();


	// ■描いた図形を消す---------------------
	fg0.clearRect(0,0,400,300);
</script>



2018. 5. 1
■画像を読み込んで表示する　　 ◆このページのトップへ 更新日
JavaScript （例） 

<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body bgcolor="#ffffff">

document.write("<canvas id='mycanvas' style='background-color:#ffffcc;' width='600' height='400'></canvas>");
<script>
	var canvas=document.getElementById("mycanvas");
	var fg0=canvas.getContext("2d");

	// ■画像を読み込んで表示する-----------------
	var img=new Image();
	img.src="image/hoge.gif";		// フォルダ image 内にある画像ファイル名 hoge.gif の画像を読み込む
	fg0.drawImage(img,100,120,70,120);	// 画像ファイル名,x位置,y位置,幅,高さ)

//	img.onload=function(){fg0.drawImage(img,100,120,70,120);} // 画像が読み込まれるのを待ってから処理を続行


	// ■表示された画像を消す---------------------
	fg0.clearRect(0,0,400,300);
</script>



2018. 5. 1
■図形や画像を任意の点のまわりに回転する　　 ◆このページのトップへ 更新日
JavaScript
　■ 図形を回転して描く
　　　　　───────────────→

　図形左上座標　(x , y)
　図形サイズ　　w×h　　　　　の図形を

　回転中心座標　(Cx , Cy)　　　の回りに
　　（図形の中心のまわりに回転したければ
　　　 Cx=x+w/2,Cy=y+h/2 とすればよい）

　回転角度　　　alp　　　だけ回転したものを描く


(コード) …… キャンパスの左上(原点)を (Cx,Cy) に移動してから回転し、(-(Cx-x),-(Cy-y)) の位置に図形を描けばよい 

<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body bgcolor="#ffffff">

document.write("<canvas id='mycanvas' style='background-color:#ffffcc;' width='600' height='400'></canvas>");
<script>
	var canvas=document.getElementById("mycanvas");
	var fg0=canvas.getContext("2d");

	var x=50,y=70;		// 図形左上位置
	var w=110,h=100;	// 図形サイズ
	var Cx=90,Cy=120;	// 回転中心の座標
	var alp=30;		// 回転角度

	fg0.save();			// 現状態を保存
	fg0.translate(Cx,Cy);		// キャンパスの左上(原点)を回転中心座標に移動
	fg0.rotate(Math.PI/180*alp);	// キャンパスを左上(原点)のまわりに回転

	fg0.lineWidth=1;			// 線の太さ
	fg0.strokeStyle="#ff0000";		// 線の色
	fg0.strokeRect(-(Cx-x),-(Cy-y),w,h);	// 長方形を描く

	fg0.restore();			// translateメソッド前の設定に戻す
</script>

　■ 取り込んだ画像を回転して表示する
　　　　　───────────────→

　　画像左上座標　(x , y)
　　画像サイズ　　w×h　　　　　の画像を

　　回転中心座標　(Cx , Cy)　　　の回りに
　　　（画像の中心のまわりに回転したければ
　　　　 Cx=x+w/2,Cy=y+h/2 とすればよい）

　　回転角度　alp　　だけ回転したものを描画する

(コード) …… キャンパスの左上(原点)を (Cx,Cy) に移動してから回転し、(-(Cx-x),-(Cy-y)) の位置に画像を表示すればよい

<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body bgcolor="#ffffff">

document.write("<canvas id='mycanvas' style='background-color:#ffffcc;' width='600' height='400'></canvas>");
<script>
	var canvas=document.getElementById("mycanvas");
	var fg0=canvas.getContext("2d");


	var x=70,y=40;		// 図形左上位置
	var w=50,h=120;		// 図形サイズ
	var Cx=95,Cy=100;	// 回転中心の座標
	var alp=30;		// 回転角度

	fg0.save();			// 現状態を保存
	fg0.translate(Cx,Cy);		// キャンパスの左上(原点)を回転中心座標に移動
	fg0.rotate(Math.PI/180*alp);	// キャンパスを左上(原点)のまわりに回転

	fg0.drawImage(image1,-(Cx-x),-(Cy-y),w,h);	// 画像を表示

	fg0.restore();			// translateメソッド前の設定に戻す
</script>

2018. 5. 1
■画像や図形のピクセル値を取得する　　 ◆このページのトップへ 更新日
JavaScript ● 読み込まれた画像や描いた図形のピクセル値を取得する には、次のようにする。
　取得する領域に、読み込んだ画像を描画、あるいは 図形を描いておく。その後で 
 var x0=30,y0=20; // 取得する領域の左上端位置
 var W=130,H=120; // 取得する領域のサイズ(幅,高)

 var imagedata0=fg0.getImageData(x0,y0,W,H); // ピクセル取得
 var org_pix=new Array(); // 画像のピクセルデータをセットする格納配列
 org_pix=imagedata0.data; // 画像のピクセルデータを org_pix にセットする
　とすればよい。

 2018.10. 1
■ピクセル操作　　 ◆このページのトップへ 更新日
JavaScript ● 取得した画像や描いた図形のピクセルの値を変えてイメージを描く には、次のようにする。
　（画像や描いた図形のピクセル値の取得の部分は、この前の項目参照のこと)

（例） ここでは図形を描き、その左右を反転した新しいイメージを作り表示してみよう。
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta http-equiv="content-type" content="text/html;charset=SHIFT_JIS">
	<title>sample</title>
</head>
<body>

<script type="text/javascript">

document.write("<canvas id='mycanvas0' width='500' height='400'></canvas>");
mycanvas0.style.background="#000000";
mycanvas0.style.left=0+"px";
mycanvas0.style.top=0+"px";

var canvas0=document.getElementById("mycanvas0");
canvas0.style.position="absolute";
var fg0=canvas0.getContext("2d");

//--------------------------------------------------------------------
var x0=30,y0=20; // 描く図形の領域の左上の位置
var W=130,H=120; // 描く図形の領域のサイズ(幅,高)

fg0.fillStyle="#00bfff"; // 図形を描く
fg0.fillRect(x0,y0,W,H);
fg0.lineWidth=10;
fg0.strokeStyle="#ff00ff";
fg0.moveTo(x0,y0);
fg0.lineTo(W,H);
fg0.stroke();

var imagedata0=fg0.getImageData(x0,y0,W,H); // ピクセル取得
var org_pix=new Array(); // ピクセルデータをセットする格納配列
org_pix=imagedata0.data; // ピクセルデータを org_pix にセット


var new_pix=new Array(); // 新しいピクセルデータをセットする格納配列
var imagedata1=fg0.createImageData(W,H);
new_pix=imagedata1.data; // 新しいピクセルデータを new_pix にセット

for(var j=0; j<W; j++) // 画像を左右反転させるための新しいピクセル値を与える
{
	for(var i=0; i<H; i++)
	{
		new_pix[4*(i+j*W)]=org_pix[4*(W-i+j*W)];	// R
		new_pix[4*(i+j*W)+1]=org_pix[4*(W-i+j*W)+1];	// G
		new_pix[4*(i+j*W)+2]=org_pix[4*(W-i+j*W)+2];	// B
		new_pix[4*(i+j*W)+3]=org_pix[4*(W-i+j*W)+3];	// α(透過度)
	}
}
fg0.putImageData(imagedata1,x0+200,y0); // 新しいイメージを表示

</script>

</body>
</html>


2018.10. 1
■一定時間待って実行する　　 ◆このページのトップへ 更新日
JavaScript ■setTimeout を使う方法

<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body bgcolor="#ffffff">

<script>
	setTimeout("hogehoge()",3000);		// 3000 は 待ち時間(ミリ秒)
						// 待ち時間待って、関数 hogehoge に行く
						// または setTimeout(function(){hogehoge()},3000); の書き方でもよい
	function hogehoge()
	{

	}
</script>
</body>
</html>

（例）…… 待ち時間30ミリ秒で、繰り返し 関数 DoRot() に行き、画像を回転させる 

<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body bgcolor="#ffffff">

<canvas id="mycanvas" style="position:absolute;background-color:#00ffff;" width="200" height="200"></canvas>
<script>
	var canvas=document.getElementById("mycanvas");
	var fg0=canvas.getContext('2d');

	var koma=new Image();	// koma は画像名
	koma.src="koma.png";	// koma.png は画像ファイル名

	var Cx=100,Cy=100;	// 回転中心の座標
	var w=57,h=62;		// 画像サイズ

	fg0.translate(Cx,Cy); // キャンバスの座標系を(0,0)から回転中心に移動

	DoRot();		// DoRot は関数名で任意
	//------------------------------------------------------
	function DoRot()
	{
		fg0.clearRect(-w/2,-h/2,w,h);		// 表示された画像を消す
		fg0.rotate(Math.PI/180*10);		// 座標を 10度 回転させる
		fg0.drawImage(koma,-w/2,-h/2,w,h);	// 画像の中心をキャンバスの(0,0)に一致させて表示
		setTimeout("DoRot()",30);		// 30ミリ秒ごとに座標の回転と画像の描画を繰り返す
	}
</script>
</body>
</html>


2018. 5. 1

◆このページのトップへ

**********************************************************************************
Copyright(C) 2006-,YokahiYokatoki