祝　東京オリンピック2020年！

東京オリンピックを記念して、オリンピックシンボルをhtml5のcanvasで書いてみました。
サンプルのjsファイルと簡単に利用できるブログパーツをご用意いたしましたのでご自由にご利用ください。

ブログパーツ

東京オリンピックまでのカウントダウンブログパーツです。
オリンピックの招致PVのイメージで作成しました。
サーバの時間ではなく表示されているPC上の時間でカウントしているため、PCの時間がずれているとずれます。



以下のコードをコピペして自分のブログに貼ってください。
<iframe src="http://s-proj.com/canvas/op.html" marginwidth=0 marginheight=0 frameborder=0 scrolling=no width=160 height=120></iframe>
こちらは前回(1964年)のオリンピックのレトロイメージで作成しました。



以下のコードをコピペして自分のブログに貼ってください。
<iframe src="http://s-proj.com/canvas/op2.html" marginwidth=0 marginheight=0 frameborder=0 scrolling=no width=160 height=120></iframe>

Spoita(スポイタ)

本サイトで提供しているスポーツ用オンライン戦略盤サービス　Spoita(スポイタ)にも反映してみました。

サッカー

オリンピックシンボル

こんな絵が表示されます。

使い方

1)olympic.jsを保存し、適当なディレクトリに展開してください。
2)drawSymbol()を実行してください。
パラメータは
drawSymbol(id,x,y,r,w,cdFlg)で
id:描画するcanvas要素のid x,y:青丸の中心の位置（始点）
r:半径
w:円の線の幅
cdFlg:カウントダウンフラグ　trueで表示されます。

後は以下のソースを参考にしてください。 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>オリンピックシンボル</title>
<script type="text/javascript" src="olympic.js"></script>
</head>
<body onload="drawSymbol('canvas',100,100,50,10,false)">
<canvas id="canvas" width="500" height="250"></canvas>
</body>
</html>

著作権

MITライセンス
お好きなようにご利用ください。
※SpoitaはMITライセンスではありません。

その他のサイト

Top
オンライン戦略ボード
祝日判定webAPI
もんじゅリアル
CodeIgniter + PostgreSQL

Copyright(c) 2013 s-proj.com All Rights Reserved.