canvas

JavaScript：canvasで秒針以外が動く変なアナログ時計を作る

秒針以外が動いて回転する変なアナログ時計です。時にはこういった視点も必要かと思い作りました。

JavaScript：キャンバスのサイズを画面サイズにあわせて変更

HTMLのcanvasタグは、JavaScriptで気軽に画像やグラフィックを扱うことができて面白いので色々と試している。個人的に作っているものの中で、canvasタグのサイズをブラウザの画面サイズにあわせて変更したいことが多いので、サンプ...

JavaScriptプログラム

JavaScript：ブラウザ画面いっぱいに雪を降らす

季節物です。以前JavaScriptで作った雪が降るプログラムを新しく書き直して、ブラウザ画面いっぱいに雪を降らせるようにした。ブラウザで雪を見る JavaScriptでもclassの記述が使えるようになったので、以前functionと...

JavaScriptプログラム

JavaScript：雪が降る（canvasで複数画像を回転）

前回の記事「JavaScript：canvasで画像のみその場で回転させる」を参考にcanvas上で複数の雪の画像を回転させるJavaScriptを作った。前回の記事サンプルを見る

JavaScriptプログラム

JavaScript：canvasで画像のみその場で回転させる

canvasで画像のみその場で回転させ、他の要素はそのまま表示させるJavaScriptプログラム。

JavaScriptプログラム

JavaScript：雪がたくさん降る

「JavaScriptにおいて関数はクラスと同義である」ということで、実際に「雪」クラス（関数）を作って雪がたくさん降ってくる様をcanvasに描いた。

JavaScriptプログラム

JavaScript：canvasを使って雪を一つずつ降らす

前回作った雪の軌跡を表示するをアニメーション化してみた。 canvasを使ってarc関数で描かれた雪が、ランダムに一つずつ降ってくる。サンプルを見る雪の落下速度（speed）と揺れ（swing）はランダムに変えている。やはりsinカーブ...

JavaScriptプログラム

JavaScript：canvasに雪の軌跡を表示する

sinやcosは、中学の数学で習ったが何の役に立つのかわからなかった。それはわたしの想像力が足りなかったせいもある。sinやcosの波打つグラフを見て日常のゆらゆらした動きや雪が降ってくるような動きに想像力が及ばなかった。サンプルを見る

JavaScriptプログラム

JavaScript:canvasにマウスで描画失敗作

最初に思い描いたイメージは、こんな感じでJavaScriptを使ってcanvasに絵を描くイメージ。そして出来上がったのがこんな感じ・・・

JavaScriptプログラム