rect left rect top canvas ididcanvas 2 stylebackgroundcolor

rect. left rect. top <canvas id="id_canvas 2" style="background-color: #ffff 00" width="400" height="300"></canvas> <script> canvas = document. get. Element. By. Id('id_canvas 2'); canvas. add. Event. Listener('click', clickfunc, true); function clickfunc(event) { var rect = event. target. Bounding. Client. Rect(); var x = event. client. X - rect. left; var y = event. client. Y - rect. top; window. alert("x="+x); window. alert(" y="+y); } </script> 3

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>canvasで図形を描く</title> <script type="text/javascript"> function test() { //描画コンテキストの取得 var canvas = document. get. Element. By. Id('sample'); if (canvas. get. Context) { var context = canvas. get. Context('2 d'); //ここに具体的な描画内容を指定する //新しいパスを開始する context. begin. Path(); context. move. To(50, 100); //座標を指定してラインを引いていく context. quadratic. Curve. To(150, 250, 100); //現在のパスを輪郭表示する context. stroke(); } } </script> </head> <body on. Load="test()"> <canvas width="300" height="150" id="sample" style="background-color: yellow; "> 図形を表示するには、canvasタグをサポートしたブラウザが必要。 </canvas> </body> 5 </html>

線で正方形を描く <Line. html> <!DOCTYPE html> <html lang=“ja”> <head> <meta charset=“UTF-8” <title>canvasで図形を描</title> <script type="text/javascript"> function draw() { var canvas = document. get. Element. By. Id('sample 1'); if ( canvas. get. Context ) { var ctx = canvas. get. Context('2 d'); /* 四角を描く */ ctx. begin. Path(); ctx. move. To(20, 20); ctx. line. To(120, 120); ctx. line. To(20, 120); ctx. close. Path(); ctx. stroke(); } } </script> </head> <body on. Load="draw()"> <h 2>canvasで図形を描く</h 2> <canvas id="sample 1" width="140" height="140" style= "background-color: yellow; "> </canvas> canvas要素はget. Context(‘ 2 d’)を実行すること </body> で、描画機能にアクセス可能な「描画コンテキス </html> ト」を取得します。コンテキストとはプログラムの実行に必要な各種情報のこと 6

(50, 0) (0, 30) (100, 30) (30, 100) (70, 100) 描画描画ボタンを押すと上図の星形を描画するプログラムを作れ(star 1. html) <body> <h 2>canvasで星形を描く</h 2> <canvas id="sample 1" width="140" height="140" style= "background-color: yellow; "> </canvas> <input type=“button” value=“描画“ size=“ 1” on. Click=“draw()"> </body> </html> <!DOCTYPE html> <html lang=“ja”> <head> <meta charset=“UTF-8” <title>canvasで図形を描</title> <script type="text/javascript"> function draw() { /* canvas要素のノードオブジェクト */ var canvas = document. get. Element. By. Id('sample 1'); if ( canvas. get. Context ) { var ctx = canvas. get. Context('2 d'); /* 星を描く */ ctx. begin. Path(); ctx. move. To(0, 30); ctx. line. To(100, 30); ctx. line. To(30, 100); ctx. line. To(50, 0); ctx. line. To(70, 100); ctx. line. To(0, 30); ctx. close. Path(); ctx. stroke(); } } </script> </head> 7

塗りつぶし矩形 <!DOCTYPE html> <head> <meta charset=“UTF-8"> <title>canvasで図形を描</title> <fill. Rect. html> <script type="text/javascript"> function draw() { /* canvas要素のノードオブジェクト */ var canvas = document. get. Element. By. Id('sample 1'); /* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */ if ( canvas. get. Context ) { var ctx = canvas. get. Context('2 d'); var x=150, y=150; /* 四角を描く */ ctx. begin. Path(); ctx. move. To(0, y); ctx. line. To(x, y); // x軸 ctx. close. Path(); ctx. stroke(); ctx. move. To(0, y); ctx. line. To(0, 0); // y軸 ctx. close. Path(); <body on. Load="draw()"> ctx. stroke(); <canvas width="150" height="150" id="sample 1" ctx. begin. Path(); style="background-color: yellow; ">> ctx. fill. Rect(20, 80, 100); // 塗り潰し四角形 </canvas> } </body> } </html> </script> </head> 9

矩形 <stroke. Rect> <!DOCTYPE html> <head> <meta charset=“UTF-8"> <title>canvasで図形を描</title> <script type="text/javascript"> function draw() { /* canvas要素のノードオブジェクト */ var canvas = document. get. Element. By. Id('sample 1'); /* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */ if ( canvas. get. Context ) { var ctx = canvas. get. Context('2 d'); /* 四角を描く */ ctx. begin. Path(); ctx. move. To(0, 150); ctx. line. To(150, 150); // x軸 ctx. close. Path(); ctx. stroke(); ctx. move. To(0, 150); ctx. line. To(0, 0); // y軸 ctx. close. Path(); <body on. Load="draw()"> ctx. stroke(); <canvas width="150" height="150" id="sample 1" style="background-color: yellow; ">> ctx. begin. Path(); </canvas> ctx. stroke. Rect(20, 80, 100); </body> } </html> } </script> </head> 10

<title>Canvas tutorial template</title> <script type="text/javascript"> function draw() { var canvas = document. get. Element. By. Id('tutorial'); if (canvas. get. Context) { var ctx = canvas. get. Context('2 d'); ctx. fill. Rect(50, 300, 200); ctx. clear. Rect(120, 80, 200, 140); ctx. stroke. Rect(200, 20, 180, 260); } } </script> <style type="text/css"> canvas { border: 1 px solid #999; } </style> <canvas id="tutorial" width="400" height="300"></canvas> 11

<body onload=“draw()”> <style type="text/css"> canvas { border: 1 px solid #999; } </style> <canvas id="tutorial" width="400" height="300"></canvas> </body> <title>Canvas tutorial template</title> <script type="text/javascript"> function draw() { var canvas = document. get. Element. By. Id('tutorial'); if (canvas. get. Context) { var ctx = canvas. get. Context('2 d'); //輪郭線による描画 ctx. begin. Path(); ctx. move. To(50, 50); ctx. line. To(360, 200); ctx. line. To(140, 250); ctx. close. Path(); ctx. stroke(); //塗り潰しによる描画 ctx. begin. Path(); ctx. move. To(50, 250); ctx. line. To(160, 20); ctx. line. To(340, 50); ctx. close. Path(); ctx. fill(); } } </script> 12

矩形の削除 <!DOCTYPE html> <head> <meta charset=“UTF-8"> <title>canvasで図形を描</title> <script type="text/javascript"> function draw() { /* canvas要素のノードオブジェクト */ var canvas = document. get. Element. By. Id('sample 1'); /* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */ if ( canvas. get. Context ) { var ctx = canvas. get. Context('2 d'); var x=150, y=150; /* 四角を描く */ ctx. begin. Path(); ctx. move. To(0, y); ctx. line. To(x, y); // x軸 ctx. close. Path(); ctx. stroke(); ctx. move. To(0, y); ctx. line. To(0, 0); // y軸 ctx. close. Path(); ctx. stroke(); ctx. begin. Path(); ctx. fill. Rect(20, 80, 100); // 塗り潰し四角形 ctx. begin. Path(); ctx. clear. Rect(30, 50, 80); } } fill. Rectメソッドで塗りつぶした矩形を描きclear. Rect メソッドを使い、その一部を切り抜きとる。白い小さい矩形が、clear. Rectメソッドで切り抜かれた部分。これらのメソッドは、呼び出された時点で描画されます。そのため、fillメソッドやstrokeメソッドは必要ない </script> </head> <body on. Load="draw()"> <canvas width="150" height="150" id="sample 1" style= "background-color: yellow; ">> </canvas> </body> </html> 13

Radian 角度° 0 90 180 270 360 0 PI/2 PI(パイ) = π 3 PI/2 2 PI PI(パイ) = 3. 14… ctx. arc(x, y, radius, start. Angle, end. Angle, anticlockwise) true(反時計周り) （７０，７０） (x, y) start Angl us radi end. A e 10° ngel 8 0° 回転角は時計回りに定義する事に注意 ctx. arc(70, 60, 10 * Math. PI / 180, 80 * Math. PI / 180, true); 15

円を描く <!DOCTYPE html> <html lang="ja"> <head> <meta charset=“UTF 8"> <title></title> <script type="text/javascript"> /* 円を描く */ function draw 1(){ var canvas = document. get. Element. By. Id('c 1'); var ctx = canvas. get. Context('2 d'); ctx. begin. Path(); ctx. arc(70, 60, 0, Math. PI*2, false); ctx. stroke(); } </script> </head> <body onload="draw 1()"> <canvas width="150" height="150" id="c 1" style="background-color: yellow; "> </canvas> </body> </html> arc(70, 60, 0, Math. PI*2, false) は、座標 (70, 70) が中心で半径60ピクセルの円を基準に、0°の位置から時計回りに 360°回転して描かれた円弧を描画する。円を描 16 く場合は、引数anticlockwiseにtrueとfalseどちらを指定しても同じ図形となります

Ballmove 2. html y vy v θ vx x y=vy*t – g*t*t/2 x=vx*t vy=v*sinθ vx=v*cosθ g=9. 8 y=vy*t – 4. 9*t*t x=vx*t vy=v*0. 71 vx=v*0. 71 y=vy*t – 4. 9*t*t x=vx*t vy=v*0. 87 vx=v*0. 5 <!DOCTYPE html> <html lang="ja"> <head> Ballmove 2 b. html <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> var x, y; var ctx; function draw() { /* canvas要素のノードオブジェクト */ /* 四角を描く */ ctx. begin. Path(); ctx. move. To(0, 150); ctx. line. To(150, 150); // x軸 ctx. close. Path(); ctx. stroke(); ctx. move. To(0, 150); ctx. line. To(0, 0); // y軸 ctx. begin. Path(); ctx. arc(x, y, 10, 0, Math. PI*2, false); ctx. stroke(); } function init(){ var canvas = document. get. Element. By. Id('sample 1'); ctx = canvas. get. Context('2 d'); var v=100; for(t=0; t<1500; t=t+0. 5){ y=v*0. 71*t-4. 9*t*t; x=0. 71*v*t; draw(); } } </script> </head> <body onload="init()"> <canvas width="1500" height="600" id="sample 1" style="background-color: yellow; "> </canvas> </body> </html> 18

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <script> var x=10; Var y=10; var ctx; function draw() { // ctx. fill. Style="#ff 0000"; // ctx. fill. Rect(0, 0, 600, 400); ctx. begin. Path(); ctx. arc(x, y, 10, 0, Math. PI*2, false); ctx. stroke(); // 次の描画位置準備 if(x>=10 && x<400 && y==10){ // ①ルート x=x+10; y=10; } else if(x>=400 && y>=10 && y<300){ // ②ルート y=y+10; x=400; } else if(y>=300 && x>10 && x<=400){ // ③ルート y=300; x=x-10; } else if(x>=10 && y<=300){ // ④ルート y=y-10; x=10; } ① ④ ② ③ Ballmove 3. html } function init(){ var canvas = document. get. Element. By. Id('sample 1'); ctx = canvas. get. Context('2 d'); var str=set. Interval("draw()", 100); } </script> </head> <body onload="init()"> <script> </script> <canvas width="1500" height="600" id="sample 1" style="background-color: yellow; "> </canvas> </body> </html> Ballmove 3 b. html 19

<!DOCTYPE html> <html lang=“ja"> <head> <meta charset="UTF-8"> <title>Document</title> <script> var speed. X = 3. 0; var speed. Y = 4. 0; var loc. X = 200; var loc. Y = 150; var ctx; function init() { var canvas = document. get. Element. By. Id('tutorial'); if (canvas. get. Context) { ctx = canvas. get. Context('2 d'); set. Interval(draw, 33); } } function draw() { ctx. fill. Style = "rgb(8, 8, 12)"; ctx. fill. Rect(0, 0, 400, 300); //位置を更新 loc. X += speed. X; // loc. X=loc. X+speed. X loc. Y += speed. Y; Ballmove 4 b. html <style type="text/css"> canvas { background-color: #000; border: 1 px solid #999; } </style> <canvas id="tutorial" width="400" height="300"></canvas> </html> if (loc. X < 0 || loc. X > 400) { speed. X *= -1; // speed. X= -１＊speed. X } if (loc. Y < 0 || loc. Y > 300) { speed. Y *= -1; } //更新した座標で円を描く ctx. begin. Path(); ctx. fill. Style = '#3399 FF'; ctx. arc(loc. X, loc. Y, 4, 0, Math. PI * 2. 0, true); ctx. fill(); } </script> </head> <body onload="init()“> </body> 20

loc. X += speed. X; // loc. X=loc. X+speed. X loc. Y += speed. Y; if (loc. X < 0 || loc. X > 400) { speed. X *= -1; // speed. X= -speed. X } if (loc. Y < 0 || loc. Y > 300) { speed. Y *= -1; } (0, 0) (200, 150) speed. X speed. Y speed. X loc. X speed. X (200+speed. X, 150+speed. Y) (200+2*speed. X, 150+2*speed. Y) (200+3*speed. X, 150+3*speed. Y) - speed. X speed. Y - speed. Y loc. Y - speed. X 21

円弧を描く <!DOCTYPE html> <head> <meta charset=“UTF-8"> <title>canvasで図形を描</title> <script type="text/javascript"> function draw() { /* canvas要素のノードオブジェクト */ var canvas = document. get. Element. By. Id('sample 1'); /* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */ if ( canvas. get. Context ) { var ctx = canvas. get. Context('2 d'); /* 四角を描く */ ctx. begin. Path(); <body on. Load="draw()"> ctx. move. To(0, 200); <canvas width="200" height="200" ctx. line. To(200, 200); // x軸 id="sample 1" style="background-color: yellow; "> ctx. close. Path(); </canvas> ctx. stroke(); </body> ctx. move. To(0, 200); </html> ctx. line. To(0, 0); // y軸 ctx. close. Path(); ctx. stroke(); ctx. begin. Path(); ctx. arc(70, 60, 10 * Math. PI / 180, 80 * Math. PI / 180, true); ctx. stroke(); } } </script> </head> arc(70, 60, 10 * Math. PI / 180, 80 * Math. PI / 180, true) は、座標 (70, 70) が中心で半径60ピクセルの円を基準に、10°の位置から反時計回り（左回り）に 80°の位置ま 23 での円弧を描画。

<title>Canvas tutorial template</title> <script type="text/javascript"> function draw() { var canvas = document. get. Element. By. Id('tutorial'); if (canvas. get. Context) { var ctx = canvas. get. Context('2 d'); //円弧 1 ctx. begin. Path(); ctx. arc(200, 150, 100, 0, Math. PI * 2, false); ctx. stroke(); //円弧 2 ctx. begin. Path(); ctx. arc(200, 150, 80, 0, Math. PI * 1. 5, false); ctx. stroke(); //円弧 3 ctx. begin. Path(); ctx. arc(200, 150, 60, Math. PI * 0. 25, Math. PI * 1. 0, true); ctx. stroke(); //円弧 4 ctx. begin. Path(); ctx. arc(200, 150, 20, 0, Math. PI * 2. 0, true); ctx. fill(); } } </script> <style type="text/css"> canvas { border: 1 px solid #999; } </style> <canvas id="tutorial" width="400" height="300"></canvas> 24

円弧を塗りつぶす <arc. Fill> <!DOCTYPE html> <head> <meta charset=“UTF-8"> <title>canvasで図形を描</title> <script type="text/javascript"> function draw() { /* canvas要素のノードオブジェクト */ var canvas = document. get. Element. By. Id('sample 1'); /* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */ if ( canvas. get. Context ) { var ctx = canvas. get. Context('2 d'); /* 四角を描く */ ctx. begin. Path(); ctx. move. To(0, 180); ctx. line. To(180, 180); // x軸 ctx. close. Path(); ctx. stroke(); ctx. move. To(0, 180); <body on. Load="draw()"> ctx. line. To(0, 0); // y軸 <canvas width="180" height="180" id="sample 1" ctx. close. Path(); style="background-color: yellow; ">> ctx. stroke(); </canvas> ctx. begin. Path(); </body> ctx. arc(70, 60, 10 * Math. PI / 180, </html> 80 * Math. PI / 180, true); ctx. fill(); } } </script> 円弧をfillメソッドで塗りつぶし描画すると、円弧が開いた部分を直線で結んだ図形とな </head> ります。扇型になるわけではない。 arcメソッドは、呼び出されただけでは描画しない。必ず最後にstrokeメソッドまたはfill 25 メソッドを呼んで描画する。

移動 context. translate(x, y) 指定の性質を使って移動変形を適用して、変換マトリックスを変更します function draw() { var canvas = document. get. Element. By. Id(‘sample’); if (canvas. get. Context) { var context = canvas. get. Context(‘ 2 d’); //左から20上から20の位置に幅50高さ 50の輪郭の四角形を描く context. stroke. Rect(20, 50, 50); //水平方向に 100垂直方向に 50移動した上で、 //左から20上から20の位置に幅50高さ 50の塗りつぶしの四角形を描く context. translate(100, 50); context. fill. Rect(20, 50, 50); } 20 50 50 100 回転(原点中心に回転） context. rotate(θ) <script type="text/javascript"> function test() { //描画コンテキストの取得 var canvas = document. get. Element. By. Id('sample'); if (canvas. get. Context) { var context = canvas. get. Context(‘ 2 d’); //ここに具体的な描画内容を指定する //左から80上から20の位置に幅50高さ 50の輪郭の四角形を描く context. stroke. Rect(80, 20, 50); //時計回り45度の回転を指定した上で、 //左から80上から20の位置に幅50高さ 50の塗りつぶしの四角形を描く context. rotate(45/180*Math. PI); context. fill. Rect(80, 20, 50); } } </script> </head> <body on. Load="test()"> <h 2>Canvasで図形を描く</h 2> <canvas width="300" height="150" id="sample" style="background-color: yellow; "> </canvas> 45° 26

<!DOCTYPE html> <html lang=“ja"> <head> <meta charset="UTF-8">ｒ <title>Document</title> </head> <script type="text/javascript"> function draw() { var canvas = document. get. Element. By. Id('sample 1'); if (canvas. get. Context) { var context = canvas. get. Context('2 d'); context. fill. Rect(canvas. width/2, canvas. height/2, 50); // 黒四角描画 context. begin. Path(); context. translate((canvas. width+50) / 2, (canvas. height+50) / 2); context. rotate(45 * Math. PI / 180); context. translate(-(canvas. width+50)/ 2, -(canvas. height+50) / 2); context. fill. Style = "red"; context. fill. Rect(canvas. width/2, canvas. height/2, 50); // 赤四角描画 } } </script> <body on. Load="draw()"> <canvas width="1000" height="500" id="sample 1" style="backgroundcolor: yellow; "></canvas> </body> </html> Rotate. RB. ｈｔｍｌ変形を適用する場合には、先に変形を指定してから図形を描画するという順序になる。変形を後から指定しても、先に描画した図形には変形が適用されないので注意 27

(canvas+W)/2 W W 原点を回転中心に移動 translate((canvas. width+W) / 2, (canvas. height+W) / 2); (canvas+W)/2 W W 原点を基の位置に移動 rotate(45 * Math. PI / 180); 28 translate(-(canvas. width+W)/ 2, -(canvas. height+W) / 2);

<!DOCTYPE html> <html lang=“ja”> <head> <meta charset=“UTF-8”> <title>Document</title> </head> <body> <canvas id=“canvas 1” width=300 height=300></canvas> <script> var canvas = document. get. Element. By. Id(“canvas 1”); var context 1 = canvas. get. Context(“ 2 d”); Rorate. Line var x = 0. 0; var rot = 0. 0; function rotate. Rect() { context 1. clear. Rect(0, 0, canvas 1. width, canvas 1. height); context 1. begin. Path(); context 1. move. To(0, 150); context 1. line. To(300, 150); context 1. close. Path(); context 1. stroke(); context 1. save(); // context 1. begin. Path(); context 1. translate(x, 150); context 1. rotate(Math. PI/4. 0*rot); context 1. translate(-25, -25); context 1. fill. Style = "rgb(0, 255, 0)"; context 1. fill. Rect(0, 0, 50); // 50/2=25が前の値 context 1. restore(); rot += 0. 1; x += 0. 3; if(x > canvas 1. width) { x = 0. 0; } } set. Interval(rotate. Rect, 10); </script> </body> </html> HTML Canvas のコンテキストではアクティブなペンのカラーやペンの幅、塗りつぶしのカラーなどの描画設定は 1つしか保持できず、描画のたびに切り替える必要があります 29

<arc. Fill 2>. function draw() { /* canvas要素のノードオブジェクト */ var canvas = document. get. Element. By. Id('sample 1'); /* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */ if ( canvas. get. Context ) { var ctx = canvas. get. Context('2 d'); /* 四角を描く */ ctx. begin. Path(); ctx. move. To(0, 200); ctx. line. To(200, 200); ctx. close. Path(); ctx. stroke(); ctx. move. To(0, 200); ctx. line. To(0, 0); // y軸 ctx. close. Path(); ctx. stroke(); ctx. begin. Path(); ctx. move. To(70, 70); ctx. arc(70, 60, 10 * Math. PI / 180, 80 * Math. PI / 180, true); ctx. close. Path(); ctx. fill(); } <arc. Fill 3> function draw() { /* canvas要素のノードオブジェクト */ var canvas = document. get. Element. By. Id('sample 1'); /* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */ if ( canvas. get. Context ) { var ctx = canvas. get. Context('2 d'); /* 四角を描く */ ctx. begin. Path(); ctx. move. To(0, 200); // x軸 ctx. line. To(200, 200); ctx. close. Path(); ctx. stroke(); ctx. move. To(0, 200); ctx. line. To(0, 0); // y軸 ctx. close. Path(); ctx. stroke(); ctx. begin. Path(); ctx. move. To(70, 70); ctx. arc(70, 60, 280 * Math. PI / 180, 350 * Math. PI / 180, false); ctx. close. Path(); ctx. fill(); } 33

半透明度を指定する（１）半透明度を指定する（rgbaフォーマットによる色指定） fill. Styleやstroke. Styleプロパティは、CSSの色指定フォーマットと同じですので、rgbaフォーマットでアルファ（透明度）を指定することも可能です。次に、3つの円を半透明にしてみましょう。 <script type="text/javascript"> function draw() { var canvas = document. get. Element. By. Id('c 1'); if ( ! canvas || ! canvas. get. Context ) { return false; } var ctx = canvas. get. Context('2 d'); /* 円 #1 */ ctx. begin. Path(); ctx. fill. Style = 'rgba(192, 80, 77, 0. 7)'; // 赤 ctx. arc(70, 45, 35, 0, Math. PI*2, false); ctx. fill(); /* 円 #2 */ ctx. begin. Path(); ctx. fill. Style = 'rgba(155, 187, 89, 0. 7)'; // 緑 ctx. arc(45, 95, 35, 0, Math. PI*2, false); ctx. fill(); /* 円 #3 */ ctx. begin. Path() ctx. fill. Style = 'rgba(128, 100, 162, 0. 7)'; // 紫 ctx. arc(95, 35, 0, Math. PI*2, false); ctx. fill(); } </script> </head> <3 circles. T 1. html> <body on. Load="draw()"> <canvas width="150" height="150" id="c 1" style="background-color: yellow; "> 図形を表示するには、canvasタグをサポートしたブラウザが必要です。 </canvas> </body> </html> rgbaの 4番目の引数に半透明度を指定。半透明度は 0から1までの間の数字を指定。0は完全な透明36 、1は一切の透明化を行わない状態。

半透明を指定する（２） <3 circles. T 2. html> <script type="text/javascript"> function draw() { var canvas = document. get. Element. By. Id('c 1'); if ( ! canvas || ! canvas. get. Context ) { return false; } var ctx = canvas. get. Context('2 d'); /* 半透明度を指定 */ ctx. global. Alpha = 0. 7; /* 円 #1 */ ctx. begin. Path(); ctx. fill. Style = 'rgb(192, 80, 77)'; // 赤 ctx. arc(70, 45, 35, 0, Math. PI*2, false); ctx. fill(); /* 円 #2 */ ctx. begin. Path(); ctx. fill. Style = 'rgb(155, 187, 89)'; // 緑 ctx. arc(45, 95, 35, 0, Math. PI*2, false); ctx. fill(); /* 円 #3 */ ctx. begin. Path(); ctx. fill. Style = 'rgb(128, 100, 162)'; // 紫 ctx. arc(95, 35, 0, Math. PI*2, false); ctx. fill(); } </script> </head> global. Alphaプロパティは、2 Dコンテキストのプロパティとして規定されるので、一度セットすると、すべての図形に適用。 <body on. Load="draw()"> <canvas width="150" height="150" id="c 1" style="background-color: yellow; "> 図形を表示するには、canvasタグをサポートしたブラウザが必要です。 </canvas> 38 </body> </html>

<title>Canvas tutorial template</title> <script type="text/javascript"> function draw() { var canvas = document. get. Element. By. Id('tutorial'); if (canvas. get. Context) { var ctx = canvas. get. Context('2 d'); //全体の透明度 ctx. global. Alpha = 0. 5; //円弧 1 ctx. begin. Path(); ctx. fill. Style = '#3399 FF'; ctx. arc(150, 80, 0, Math. PI * 2. 0, true); ctx. fill(); //円弧 2 ctx. begin. Path(); ctx. fill. Style = '#FF 9933'; ctx. arc(250, 150, 80, 0, Math. PI * 2. 0, true); ctx. fill(); } } </script> <style type="text/css"> canvas { border: 1 px solid #999; } </style> global. Alpha: 図形やイメージの透明度を 0. 0（完全な透明）～ 1. 0（透明化なし）の範囲の数値で指定（初 39 期値は 1. 0）

Ballmove 4. html <style type="text/css"> canvas { background-color: #000; border: 1 px solid #999; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> var speed. X = 3. 0; var speed. Y = 4. 0; var loc. X = 200; var loc. Y = 150; var ctx; function init() { var canvas = document. get. Element. By. Id('tutorial'); if (canvas. get. Context) { ctx = canvas. get. Context('2 d'); set. Interval(draw, 33); } } function draw() { ctx. fill. Style = "rgba(8, 8, 12, 0. 2)"; ctx. fill. Rect(0, 0, 400, 300); //位置を更新 loc. X += speed. X; loc. Y += speed. Y; if (loc. X < 0 || loc. X > 400) { speed. X *= -1; } if (loc. Y < 0 || loc. Y > 300) { speed. Y *= -1; } //更新した座標で円を描く ctx. begin. Path(); ctx. fill. Style = '#3399 FF'; ctx. arc(loc. X, loc. Y, 4, 0, Math. PI * 2. 0, true); ctx. fill(); } </script> <canvas id="tutorial" width="400" height="300"></canvas> </head> <body onload="init()"> </html> </body> > 40

線形グラデーション横向きグラデーション onload = function() { draw(); }; function draw() { var canvas = document. get. Element. By. Id(‘c 1’); if ( ! canvas || ! canvas. get. Context ) { return false; } var ctx = canvas. get. Context(‘ 2 d’); ctx. begin. Path(); /* グラデーション領域をセット */ var grad = ctx. create. Linear. Gradient(0, 0, 0, 140); /* グラデーション終点のオフセットと色をセット */ grad. add. Color. Stop(0, ‘rgb(192, 80, 77)’); // 赤 grad. add. Color. Stop(0. 5, ‘rgb(155, 187, 89)’); // 緑 grad. add. Color. Stop(1, ‘rgb(128, 100, 162)’); // 紫 /* グラデーションをfill. Styleプロパティにセット */ ctx. fill. Style = grad; /* 矩形を描画 */ ctx. rect(0, 0, 140); ctx. fill(); } <Linear. Grad> 42

円形グラデーション onload = function() { draw(); }; function draw() { var canvas = document. get. Element. By. Id('c 1'); if ( ! canvas || ! canvas. get. Context ) { return false; } var ctx = canvas. get. Context('2 d'); ctx. begin. Path(); /* グラデーション領域をセット */ var grad = ctx. create. Radial. Gradient(70, 20, 70, 70); /* グラデーション終点のオフセットと色をセット */ grad. add. Color. Stop(0, 'red'); // 赤 grad. add. Color. Stop(0. 5, 'yellow'); // 黄 grad. add. Color. Stop(1, 'blue'); // 青 /* グラデーションをfill. Styleプロパティにセット */ ctx. fill. Style = grad; /* 矩形を描画 */ ctx. rect(0, 0, 140); ctx. fill(); } <circler. Grad> 44

<title>Canvas tutorial template</title> <script type="text/javascript"> function draw() { var canvas = document. get. Element. By. Id('tutorial'); if (canvas. get. Context) { var ctx = canvas. get. Context('2 d'); //全体の透明度 ctx. global. Alpha = 0. 3; //1000回処理をくりかえす for (i = 0; i < 1000; i++) { ctx. begin. Path(); //ランダムな色を生成 var r = Math. floor(Math. random() * 256); var g = Math. floor(Math. random() * 256); var b = Math. floor(Math. random() * 256); ctx. stroke. Style = 'rgb(' + r + ', ' + g + ', ' + b + ')'; //ランダムな場所に始点を移動 ctx. move. To(Math. random() * 400, Math. random() * 300); //ランダムな場所まで線を描く ctx. line. To(Math. random() * 400, Math. random() * 300); ctx. stroke(); } } } </script> <style type="text/css"> canvas { border: 1 px solid #999; } </style> <canvas id="tutorial" width="400" height="300"></canvas> 45

ballmove 1 <style type="text/css"> canvas { background-color: #000; border: 1 px solid #999; } </style> <canvas id="tutorial" width="400" height="300"></canvas> <title>Canvas tutorial template</title> <script type="text/javascript"> var speed. X = 3. 0; var speed. Y = 4. 0; var loc. X = 200; var loc. Y = 150; var ctx; function init() { var canvas = document. get. Element. By. Id('tutorial'); if (canvas. get. Context) { ctx = canvas. get. Context('2 d'); set. Interval(draw, 33); } } function draw() { ctx. global. Composite. Operation = "source-over"; ctx. fill. Style = "rgba(8, 8, 12, 0. 2)"; ctx. fill. Rect(0, 0, 400, 300); ctx. global. Composite. Operation = "lighter"; //位置を更新 loc. X += speed. X; loc. Y += speed. Y; if (loc. X < 0 || loc. X > 400) { speed. X *= -1; } if (loc. Y < 0 || loc. Y > 300) { speed. Y *= -1; } //更新した座標で円を描く ctx. begin. Path(); ctx. fill. Style = '#3399 FF'; ctx. arc(loc. X, loc. Y, 4, 0, Math. PI * 2. 0, true); ctx. fill(); } </script> 46

<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>tryhtml 5_canvas_globalcompop ソース</title> </head> <body> <canvas id="my. Canvas" width="300" height="150" style="border: 1 px solid #d 3 d 3 d 3; "> </canvas> <script> var canvas=document. get. Element. By. Id("my. Canvas"); var ctx=canvas. get. Context("2 d"); ctx. fill. Style="red"; ctx. fill. Rect(20, 75, 50); ctx. fill. Style="blue"; ctx. global. Composite. Operation="source-over"; ctx. fill. Rect(50, 75, 50); ctx. fill. Style="red"; ctx. fill. Rect(150, 20, 75, 50); ctx. fill. Style="blue"; ctx. global. Composite. Operation="destination-over"; ctx. fill. Rect(180, 50, 75, 50); </script> </body> </html> 48

onload = function() { draw(); }; function draw() { var canvas = document. get. Element. By. Id('c 1'); if ( ! canvas || ! canvas. get. Context ) { return false; } var ctx = canvas. get. Context('2 d'); /* Imageオブジェクトを生成 */ var img = new Image(); img. src = “seal. jpg"; /* 画像を描画 */ ctx. draw. Image(img, 0, 0); } このサンプルコードは、seal. jpgという画像ファイルを読み込んで、Canvasの左端上に描画しようとしたもの <Image. html> 50

画像のトリミング Canvasで画像を効果的に使えるシーンとは、画像をトリミングしたい場合でしょう。ある画像の一部分を切り取り、それを好きな場所に表示することができます。 onload = function() { <Image. Trim. html> draw(); }; function draw() { var canvas = document. get. Element. By. Id('c 1'); if ( ! canvas || ! canvas. get. Context ) { return false; } var ctx = canvas. get. Context('2 d'); /* Imageオブジェクトを生成 */ var img = new Image(); img. src = “Lord. Howe. jpg" ; /* 画像が読み込まれるのを待ってから処理を続行 */ img. onload = function() { ctx. draw. Image(img, 100, 80, 50, 40, 80, 60, 150, 120); } } 51

52

回転させるには rotate() メソッドを使用します。 rotate() メソッドの構文（回転角度の単位はラジアン） <canvas id="canvas"></canvas> <style> canvas { border: 1 px solid silver; } </style> var canvas = document. get. Element. By. Id('canvas'); var c = canvas. get. Context('2 d'); // Image オブジェクトを生成 var img = new Image(); img. src = '. . /sample/img/bg_nangoku 2. jpg'; img. onload = function(){ // 通常 c. draw. Image(img, 60, 0); // 30度回転 c. rotate(30 * Math. PI / 180); c. draw. Image(img, 60, 0); } 長方形の回転画像の回転 53

<!DOCTYPE html> <head> <meta charset=“UTF-8"> <title>canvasで図形を描</title> <style type="text/css"> #body{ background-color: white; margin: 10 px auto; } </style> <body id="body“ onload=“strt()”> <script> var rect. Width = 100; var rect. Height = 50; var theta = 10; var My. Canvas; var Con. Mode; //キャンバスがロードされてから初期処理を行う function strt() { //キャンバスオブジェクトへの参照をセット My. Canvas = document. get. Element. By. Id("Draw. Field"); //キャンバスの大きさを 400 px× 400 pxにする My. Canvas. set. Attribute('width', '400'); My. Canvas. set. Attribute('height', '400'); //2次元描画用コンテキストを設定 Con. Mode = My. Canvas. get. Context('2 d'); //背景の円を書く。0度から360度までの半径が長方形の長さと同じ円。中心点はキャンバスの中心 Con. Mode. arc(My. Canvas. width/2, My. Canvas. height/2, rect. Width, 0, 360* Math. PI / 180, false); //線の色を黒にして線を描く Con. Mode. stroke. Style = "Black"; Con. Mode. stroke(); 54

//色を赤にして塗りつぶす Con. Mode. fill. Style = "Red"; Con. Mode. fill(); }; //キャンバスの座標系を 0, 0（左上）からキャンバスの中心に移動する Con. Mode. translate(My. Canvas. width/2, My. Canvas. height/2); //回転を行う処理。タイマーで再帰的に繰り返される。 function Rotate. View(){ //青色で線を描く Con. Mode. stroke. Style = "Blue"; //長方形の重心がキャンバス座標の中心点にくるように長方形を描く // すでに座標系が移動しているので回転はキャンバスの中心を軸に行われ // (0, 0)という座標の指定はキャンバスの中心を意味する Con. Mode. stroke. Rect(-rect. Width/2, -rect. Height/2, rect. Width, rect. Height); Con. Mode. rotate(theta * Math. PI / 180); } //白色で線を描く Con. Mode. stroke. Style = "White"; Con. Mode. stroke. Rect(-rect. Width/2, -rect. Height/2, rect. Width, rect. Height); //50ミリ秒ごとに座標の回転と長方形の描画を繰り返す function init(){ set. Interval(“Rotate. View()”, 50); } </script> <form> <canvas id="Draw. Field" style="border: solid"></canvas> <input id= "Rotation" type=button value="回転" on. Click=“init()" style="position: absolute; left: 100 px; top: 430 px; width: 50 px; "> </form> </head> </body> </html> 55

<!DOCTYPE html> // 画像の回転 <html> <head> <meta charset="Shift-JIS"> <title>canvasで図形を描</title> <style type="text/css"> #body{ background-color: white; margin: 10 px auto; } </style> <body id="body"> <script> var theta = 10; var My. Canvas; var Con. Mode; var Rotate. State = 0; var Img = document. create. Element('img'); var Img. Width = 204. 8; var Img. Height = 153. 6; //キャンバスがロードされてから初期処理を行う onload = function() { //キャンバスオブジェクトへの参照をセット My. Canvas = document. get. Element. By. Id("Draw. Field"); //キャンバスの大きさを 400 px× 400 pxにする My. Canvas. set. Attribute('width', '400'); My. Canvas. set. Attribute('height', '400'); //2次元描画用コンテキストを設定 Con. Mode = My. Canvas. get. Context('2 d'); 56

//キャンバスの座標系を 0, 0（左上）からキャンバスの中心に移動する Con. Mode. translate(My. Canvas. width/2, My. Canvas. height/2); //読み込んだ画像イメージを指定のサイズでキャンバスの中心に表示する Con. Mode. draw. Image(Img, -Img. Width/2, -Img. Height/2, Img. Width, Img. Height); }; //回転ボタンが押された時の処理(-(Img. Width+20)/2, -((Img. Height+20)/2, Img. Width+20, Img. Height+20); function Rotate. View(){ //ステータスを回転状態にする Rotate. State = 1; Do. Rotate(); } //回転を行う処理。タイマーで再帰的に繰り返される。 function Do. Rotate(){ if (Rotate. State == 0){ return; } else{ //表示された画像を消す ctx. clear. Rect(x, y, width, height) Con. Mode. clear. Rect(-Img. Width/2 -10, -Img. Height/2 -10, Img. Width+20, Img. Height+20); //座標を回転させる Con. Mode. rotate(theta * Math. PI / 180); //画像の重心がキャンバス座標の中心点にくるように画像を表示する Con. Mode. draw. Image(Img, -Img. Width/2, -Img. Height/2, Img. Width, Img. Height); } } //30ミリ秒ごとに座標の回転と画像の描画を繰り返す set. Timeout(function(){Do. Rotate()}, 30); //画像小表示する処理 function Shrink. View(){ //表示された画像を消す Con. Mode. clear. Rect(-Img. Width/2 -10, -Img. Height/2 -10, Img. Width+20, Img. Height+20); 57

//画像の大きさを 0. 833倍にする Img. Width = Img. Width/1. 2; Img. Height = Img. Height/1. 2; } //画像の重心がキャンバス座標の中心点にくるように画像を表示する Con. Mode. draw. Image(Img, -Img. Width/2, -Img. Height/2, Img. Width, Img. Height); //画像を拡大表示する処理 function Expand. View(){ //表示された画像を消す Con. Mode. clear. Rect(-Img. Width/2 -10, -Img. Height/2 -10, Img. Width+20, Img. Height+20); //画像の大きさを 1. 2倍にする Img. Width = Img. Width*1. 2; Img. Height = Img. Height*1. 2; } //画の重心がキャンバス座標の中心点にくるように画像を表示する Con. Mode. draw. Image(Img, -Img. Width/2, -Img. Height/2, Img. Width, Img. Height); //回転を止める処理 function Stop. Rotate(){ //ステータスを停止状態にする Rotate. State = 0; } </script> <form> <canvas id="Draw. Field" style="border: solid"></canvas> <input id= "Rotation" type=button value="回転" on. Click="Rotate. View()" style="position: absolute; left: 50 px; top: 420 px; width: 50 px; "> <input id= "Shrink" type=button value="縮小" on. Click="Shrink. View()" style="position: absolute; left: 130 px; top: 420 px; width: 50 px; "> <input id= "Expand" type=button value="拡大" on. Click="Expand. View()" style="position: absolute; left: 210 px; top: 420 px; width: 50 px; "> <input id= "Stop" type=button value="停止" on. Click="Stop. Rotate()" style="position: absolute; left: 290 px; top: 420 px; width: 50 px; "> </form> </head> </body> </html> 58

<canvas id="canvas" width="250" height="100" style="border: solid gray 1 px; "></canvas> ctx. fill. Text(text, x, y[, max. Width]) ctx. stroke. Text(text, x, y[, max. Width]) <script> window. onload = function() { var canvas = document. get. Element. By. Id('canvas'); var ctx = canvas. get. Context('2 d'); // Canvas. Rendering. Context 2 D ctx. font = '50 pt Arial'; ctx. fill. Style = 'rgba(0, 0, 255)'; ctx. fill. Text('Hello', 20, 70); // 座標 (20, 50) にテキスト描画 }; </script> <canvas id="canvas" width="250" height="100" style="border: solid gray 1 px; "></canvas> <script> window. onload = function() { var canvas = document. get. Element. By. Id('canvas'); var ctx = canvas. get. Context('2 d'); // Canvas. Rendering. Context 2 D ctx. font = 'bold 60 pt sans-serif'; ctx. stroke. Style = '#f 00'; ctx. line. Width = 3; ctx. stroke. Text('Hello', 20, 80); // 座標 (20, 80) にテキスト描画 }; </script> 59

<!DOCTYPE html> <html lang=“ja”> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> var speed. X = 3. 0; var speed. Y = 4. 0; var loc. X = 200; var loc. Y = 150; var ctx; var N=0. 0; var Pos=1; function init() { var canvas = document. get. Element. By. Id('tutorial'); if (canvas. get. Context) { ctx = canvas. get. Context('2 d'); set. Interval(draw, 30); } } function draw() { ctx. fill. Style = "rgb(8, 8, 12)"; ctx. fill. Rect(0, 0, 800, 500); loc. X += speed. X; loc. Y += speed. Y; if (loc. X < 0 || loc. X > 650) { speed. X *= -1; } if (loc. Y < 50 || loc. Y > 500) { speed. Y *= -1; } ctx. font = '50 pt Arial'; ctx. fill. Style = 'rgba(255, 0)'; ctx. fill. Text('Hello', loc. X, loc. Y); ctx. fill. Style ='rgba(8, 8, 12, '+N+')'; if(Pos==1){ N=N+0. 01; if(N>1){ N=1; Pos=0; } } else{ N=N-0. 01; textmove 2 textmove 1 if(N<0){ N=0; Pos=1; } } ctx. fill. Rect(0, 0, 800, 500); } </script> </head> <body onload="init()"> </body> <style type="text/css"> canvas { background-color: #000; border: 1 px solid #999; } </style> <canvas id="tutorial" width="800" height="500"></canvas> </html> 60