Page/備忘録/Canvasリファレンス
http://wikizum.cswiki.jp/index.php?Page%2F%E5%82%99%E5%BF%98%E9%8C%B2%2FCanvas%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9
[
トップ
] [
編集
|
凍結
|
差分
|
バックアップ
|
添付
|
リロード
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
最新の20件
2015-01-16
Page/20131100_恋するフォーチューンクッキー
2014-10-04
Page/関連情報/2013.12
2014-09-13
Page/備忘録/SublimeTextでエラーを表示するパッケージ
Page/備忘録/イラレに寸法線を入れるプラグイン
Page/備忘録/ブラウザエディタ
Page/備忘録/Canvasリファレンス
Page/備忘録/Template
Page/20140124_
Page/関連情報/2014.01
Page/関連情報/2013.11
Page/関連情報/2013.10
2014-08-29
Page/20131100_紅作戦_マッキM33
2014-08-23
page/備忘録/イラレに寸法線を入れるプラグイン
2014-08-22
page/関連情報/2013.10
2014-08-21
page/備忘録/ブラウザエディタ
2014-08-12
page/備忘録/sublimetextでエラーを表示するパッケージ
2014-08-02
page/関連情報/2013.11
page/関連情報/2013.12
2014-07-29
page/20140124_
2014-01-24
FrontPage
Total:1
Today:1
Tweet
Canvasリファレンス
†
↑
参考
†
http://www.html5.jp/canvas/ref.html
なかなか良いサイト
http://www.h2.dion.ne.jp/~defghi/canvasMemo/canvasMemo.htm
↑
†
fill()
stroke()
↑
コード
†
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>サンプル</title> <script type="text/javascript"> // サーバーアイコンを描画する function drawServerIcon(context, x, y, name) { context.save(); context.translate(x-25, y-40); var path1 = new Array(); path1[0] = [ 5, 20]; path1[1] = [25, 8]; path1[2] = [40, 13]; path1[3] = [40, 50]; path1[4] = [20, 62]; path1[5] = [20, 62]; path1[6] = [ 5, 57]; var path2 = new Array(); path2[0] = [ 5, 20]; path2[1] = [20, 25]; path2[2] = [20, 62]; path2[3] = [ 5, 57]; var path3 = new Array(); path3[0] = [ 5, 20]; path3[1] = [25, 8]; path3[2] = [40, 13]; path3[3] = [20, 25]; var path4 = new Array(); path4[0] = [ 5, 35]; path4[1] = [20, 40]; var path5 = new Array(); path5[0] = [ 5, 57]; path5[1] = [25, 45]; path5[2] = [40, 50]; path5[3] = [20, 62]; context.save() context.beginPath(); context.shadowBlur = 6; context.shadowColor = "black" context.shadowOffsetX = 4 context.shadowOffsetY = 0; context.fillStyle = "black"; context.moveTo(path5[0][0], path5[0][1]); for(var i=1; i<=path5.length-1; i++) context.lineTo(path5[i][0], path5[i][1]); context.closePath(); context.fill(); context.restore() context.beginPath(); var grd = context.createLinearGradient(20,25, 40,50); grd.addColorStop(0,"#A0A0A0"); grd.addColorStop(1,"#D0D0D0"); context.fillStyle = grd; context.moveTo(path1[0][0], path1[0][1]); for(var i=1; i<=path1.length-1; i++) context.lineTo(path1[i][0], path1[i][1]); context.closePath(); context.fill(); context.beginPath(); context.fillStyle = "#D0D0D0"; context.moveTo(path2[0][0], path2[0][1]); for(var i=1; i<=path2.length-1; i++) context.lineTo(path2[i][0], path2[i][1]); context.closePath(); context.fill(); context.beginPath(); context.fillStyle = "#F8F8F8"; context.moveTo(path3[0][0], path3[0][1]); for(var i=1; i<=path3.length-1; i++) context.lineTo(path3[i][0], path3[i][1]); context.closePath(); context.fill(); context.beginPath(); context.strokeStyle = "#909090"; context.lineWidth = 1; context.moveTo(path4[0][0], path4[0][1]); context.lineTo(path4[1][0], path4[1][1]); context.moveTo(path4[0][0], path4[0][1]-7); context.lineTo(path4[1][0], path4[1][1]-7); context.closePath(); context.stroke(); context.beginPath(); context.strokeStyle = "#F8F8F8"; context.lineWidth = 1; context.moveTo(path4[0][0], path4[0][1]+1); context.lineTo(path4[1][0], path4[1][1]+1); context.moveTo(path4[0][0], path4[0][1]-6); context.lineTo(path4[1][0], path4[1][1]-6); context.stroke(); context.beginPath(); context.strokeStyle = "#606060"; context.lineWidth = 2; context.lineCap = "round"; context.lineJoin = "round"; context.moveTo(path1[0][0], path1[0][1]); for(var i=1; i<=path1.length-1; i++) context.lineTo(path1[i][0], path1[i][1]); context.closePath(); context.stroke(); context.font = "italic bold 10px 'Arial'"; context.fillStyle = "green"; context.textAlign = "center"; context.fillText(name,22,72); context.restore(); } // ページロード時の処理 window.onload = function (){ var canvas = document.getElementById('fig'); if (canvas.getContext) { var context = canvas.getContext('2d'); // 経路の描画 // context.beginPath(); // context.strokeStyle = "lightblue"; // context.lineWidth = 8; // context.moveTo(70, 40); // context.lineTo(200, 200); // context.lineTo(310, 40); // context.stroke(); // アイコンの描画 drawServerIcon(context,70,40,"Server-A"); drawServerIcon(context,200,200,"Server-B"); drawServerIcon(context,310,40,"Server-C"); } } </script> </head> <body style="background-color: silver"> <p>サーバー図</p> <canvas id="fig" width="400" height="240" style="background-color: white">図形を表示できません。 </canvas> </body> </html>
Last-modified: 2014-09-13 (土) 00:15:31