ノンプログラマにCanvasを使ったアニメーションについて教えたった話 - Qiita
Hola!えいやです。 先日、近所に住んでいるスタートアップを目指すノンプログラマな元軍人がCanvasでのアニメーションについて聞きたいと訪ねてきたので教えたった話です。 ノンプログラマが相手ですので、JavaScriptの基礎の話です。 また、今回の相談は以前作って完成した物に手を加える話なのでCanvas成分低めです。 アニメーションと時間処理 アニメーションを行うには、時間によって処理を実行するタイミングを決められなければなりません。 そこでCanvasやアニメーションの話は置いといて、時間処理を行う方法について勉強しましょう。 時間処理の関数、setTimeout()とsetInterval() JavaScirptで時間処理を行うためには、setTimeout()もしくはsetInterval()を用います。 まずはこれらの使い方を学びましょう。 ※ 以下の例では、わかりやすく
Canvasを使用したメーター表示のサンプル - Qiita
HTML5を使用して、以下の様に画像の周りに丸く囲うようなメーターを表示してみました。 以下コード。 // (c) aya_eiya - 2013 (function (){ this.setMeter = function(_id,_size,imageSrc,_percent){ var percent = _percent; var size = _size; var canvas = document.createElement('canvas'); var context = canvas.getContext("2d"); var meterDiv = document.getElementById(_id); meterDiv.appendChild(canvas); var image = new Image(); var transparent = "rgba(0,0,0
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてなブログに移行しました
はてなブログに移行しました
