┗━HTML5のcanvas要素
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> canvas出力 </title> </head> <body> <h2> canvas出力サンプル </h2> <canvas id="canvas" width="420" height="320" style="border:1px solid black"></canvas> <h2>出力結果</h2> <img id="result"></img>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title>グラデーション</title> </head> <body> <h2> グラデーションサンプル </h2> <canvas id="canvas" width="400" height="420" style="border:1px solid black"></canvas> <script type="text/javascript"> // canvas要素取得 var canv…</body></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 合成制御 </title> </head> <body> <h2> 合成制御サンプル </h2> オプション選択<select style="width:160px" onchange="draw(this.value);";> <option value="source-over">source-over</option> <option value="source-in">sou…</option></select></body></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 矩形陣変換 </title> </head> <body> <h2> 矩形陣変換サンプル </h2> <canvas id="canvas" width="600" height="360" style="border:1px solid black"></canvas> <script type="text/javascript"> function skew(context,an…</body></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 雪効果 </title> </head> <body> <h2> 雪効果サンプル </h2> <canvas id="canvas" width="420" height="280" style="border:1px solid black"></canvas> <script type="text/javascript"> // 雪 function createFlower(c…</body></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 座標変換 </title> </head> <body> <h2> 座標変換サンプル </h2> <canvas id="canvas" width="420" height="320" style="border:1px solid black"></canvas> <script type="text/javascript"> // canvas要素取得 var canvas =…</body></html>
イメージ描くをメソッド void drawImage(Image image, float x, float y) : x,y位置にそのまま表示する void drawImage(Image image, float x, float y, float width, float height) : x,y位置に伸縮して表示する void drawImage(Image image, integer sx, i…
複雑な図形を描く際には経路を使う。 使用流れ canvasRenderingContext2DのbeginPaht()で開始する canvasRenderingContext2Dのメソッドで経路を追加する arc arcTo bezierCurveTo lineTo moveTo quadraticCurveTo rect canvasRenderingContext2DのclosePaht(…
影を設定する属性 shadowBlur shadowColor shadowOffsetX shadowOffsetY <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 影を設定する</title> </head> <body> <h2> 影を設定するサンプル </h2> <canvas id="canvas" width="500" height="280" style="border:1px solid black"></canvas></body></html>
テキストを描く二つのメソッド fillText(String text, float x, float y, [float maxWidth]) strokeText(String text, float x, float y, [float maxWidth]) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> テキストを描く </title> </head> <body> <h2> テキストを描くサンプル </h2> </body></html>
四角を描く二つのメソッド fillRect(float x, float y, float width, float height) strokeRect(float x, float y, float width, float height) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 図形を描く </title> </head> <body> <h2> 図形を描くサンプル </h2> </body></html>
・ 四角を描く ・ テキストを描く ・ 影を描く ・ 円を描く ・ 角丸四角を描く ・ 多角星を描く ・ N葉っぱ花を描く ・ イメージを描く ・ 座標システム変更 ・ 雪落下 ・ 矩形陣変換 ・ 合成制御 ・ グラデーション ・ 出力
