liguofeng29’s blog

個人勉強用ブログだっす。

2016-01-24から1日間の記事一覧

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>

HTML5のcanvas要素 - グラデーション

<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>

HTML5のcanvas要素 - 合成(composite)制御

<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>

HTML5のcanvas要素 - 矩形陣変換

<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>

HTML5のcanvas要素 - 座標システムと経路を使い雪落下を実現する

<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>

HTML5のcanvas要素 - 座標システム変換

<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>