【JavaScript】canvasでアナログ時計 at softelメモ
問題 canvasでアナログ時計って作れる？ 答え 作りましょう。 今回は、1つのcanvas要素を用いて、1秒ごとに時計全体を書き直す形で実装する。 canvasは、ほぼWindows付属のペイントの表示領域のようなものと考えてよく、一度描画した図形を再取得して描画しなおしたり、位置をずらしたり、回転したりといったことはできない。フォトショップで言うレイヤーのようなものはなく、canvasが1つしかないなら、毎秒書き直すのがよくある実装だと思う。 時計の表示には以下の要素が考えられる、 文字盤 背景 時間の目盛り 分の目盛り 時針 分針 秒針 シンプルな時計を作るので、文字盤や背景は省略する。 時間の目盛り、分の目盛りはいつも固定位置に、時針、分針、秒針は時刻に応じた位置に表示する。 それぞれの描画メソッドをつくり、タイマーで1秒おきに更新できる仕組みを作ったら出来上がり。 Demo S
Javascript - アナログ時計を描く（HTML5のCanvasで表示）｜及川WEB室
HTML5 の Canvas でアナログ時計を描く ↑この時計は、画像でもFlashでもありません。 HTML5の、Canvas を使って、アナログ時計を描いています。 現在の時間を示しています。 1秒ごとに関数を呼び出して、針が動くアニメーションとなるようにしています。 金属っぽく色をつけてみました。 文字盤に数字も付けました。 下記のサイトを参考にさせていただきました。ありがとうございます。 local MDC: 基本的なアニメーション [HTML5] Canvasを使ってアナログ時計を作成してみた - YoheiM.NET ソースコード Javascript // ページ読み込み時に init関数を実行 window.onload = function() { init(); }; // clock関数を１秒周期で繰り返す function init(){ clock(); setI
Cookieを使わずにユーザーを追跡する仕組みが普及しつつある | スラド IT
Canvas機能を使った文字やグラフィックス描画の際の挙動の違いでWebブラウザの違いを識別する「Canvas Fingerprinting」という技術が開発され、すでにトップ10万のサイト中5.5%がこれを使ったユーザー追跡を利用しているという。 また、ユーザがCookieをこまめに削除しても、サイト側が同じデータをFlashのローカル共有オブジェクト（LSO、Flash Cookie）などに保存しておいて回復させれば、実質的にCookieを不滅化することができる。このEvercookieを実現する手段の一つである「Respawning by Flash cookie」sは、人気上位200サイトのうち10サイトで検出されたそうだ。 Cookieを無効にしていても、適切な対処をしない限り、閲覧者の行動はかなりの割合で漏洩している可能性があるようだ。 Canvas Fingerprintin
[JS]なにこれ楽しい！インタラクション満載の路線図を実装するスクリプト -transitive.js
路線図の入り組んでいるところって、分かりにくいですよね。 そんな問題を解決するCanvasで実装するインタラクション満載の路線図のスクリプトを紹介します。 ↓くっついてて分かりにくい箇所も、こんな感じに移動できます。 デモページ 上のアニメーションgifみたいに移動させることだけでなく、ホイール操作での拡大縮小やドラッグ操作などもできます。 路線図は各要素（駅やルートなど）のテキストファイルを元に、Canvasで描画されています。 各要素のデータ（オレンジのルート）はこんな感じです。 "route": "ORANGE", "from": "12488", "to": "7588", "fromName": "COURTHOUSE METRO STATION", "toName": "METRO CENTER METRO STATION", "routeShortName": "Orange
msto.jp - it転職 リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Canvasリファレンス - HTML5.JP
[JS]美しい曲線を使ったチャート・グラフが描けるHTML5 Canvasを使ったスクリプト -Flotr2
