こんにちは、デザイナーのスギヤマです。 今日は、クリスマスイブですね。 個人的にクリスマスは静かに雪が降っていて、綺麗と言ったイメージがあります。 なので気分だけでもそんな雰囲気を味わうべく、色々参考にしながらcanvasの勉強を兼ねて雪を振らせるJSを書いてみました。 以下で簡単説明していきます。 サンプルコード サンプルおよび記事トップ写真 : 東京駅丸の内正面通りからの夜景 色々準備する canvasを使うための準備をしていきます。 今回はブラウザーのウィンドウにフィットする様に表示させる方向で進めます。 canvasの表示領域は、設定しないと可変にならないようなので、 リサイズイベントを検知してcanvasのサイズを変えるよう指定します。 snow.js /*------------------------ canvas要素の取得と設定 ----------------------
「アイキャッチ画像は大事だ！」と聞いた事はあると思いますが、なぜなのでしょうか？ まずは、こちらを見て下さい。 これは僕のブログをスマホから見た記事ですが、目に入る順番はどうでしょうか？ おそらくは、この3つの順番ですよね。 視覚的に最も引かれるのはアイキャッチ画像で間違いないでしょう。 そう、読者に記事を読ませるには、まず視覚で読み手をキャッチする必要があるのです。 まさにアイ（視覚）・キャッチですよね。 では、僕がお勧めするアイキャッチ画像ツール『Canva（キャンバ）』の紹介をさっそくしていきます。 ２．『Canva』とは？ Canvaは、オーストラリア発のグラフィックデザインツールです。 5年ほど前に開発され、今年、日本語版がリリースされました。 まさに新星のようなグラフィックツールですね。 ざっくり言うと、Canva一つで画像加工や文字入れ、イラストの作成などがまとめてできます。
本日Chromeのバージョン21がリリースされ、getUserMediaが実装されたようです。 getUserMediaを使うと、javascriptを使ってカメラにアクセスできるようなので、やってみました。 参考にしたページは以下 getUserMedia API <body> <video autoplay width="640" height="480"></video> <img src="" width="640" height="480" > <canvas style="display:none;" width="640" height="480"></canvas> <div id="wrapper"> <button id="capture">capture</button> <button id="stop">stop</button> </div> </body> <
![[HTML5]getUserMedia APIを使ってカメラを表示させてみる – o24ブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fs0.wp.com%2Fi%2Fblank.jpg)
HTML5飯 http://atnd.org/events/52477 発表資料 ぱんちら.js -JavaScriptでテクスチャマッピング-Read less
はじめましてこんにちは。 KRAYアルバイトの浅海です。 html5のcanvasを使ってお絵かき投稿サイトを作ってみようと思います。 初めてブログ記事を書くということで気合が入りました。 ちょっと長めですがお付き合い下さい。 機能 お絵かき投稿サイトの必要最低限な機能って？ ざっと下のような機能を入れてみます。 絵を描ける 絵を消せる 描画を一回分戻れる 線の太さを変えられる 線の色を変える 絵を投稿できる 投稿された画像の一覧を表示できる → 完成見本はこちら完成見本の公開は終了致しました。 絵を描ける HTML5のcanvasにマウスの軌道に線を引いていくわけです。 canvasでのマウス軌道の描き方は、 ・mousemoveイベント発生時に点をプロット という手段が真っ先に思い浮かぶと思いますが、これは、以下の様になります。 これではお話になりません。 なので、点ではなく線を引くこ
X Check example molecules. Import PDB/SDF/MOL files. Export to PNG image. Drag widgets around. Drag molecule to rotate. Mouse wheel to zoom. Toggle automatic rotation around X,Y,Z axis. Try different rendering options. Warning: complex molecules are very slow, your browser may freeze occasionally if you enable autorotation. Like this? Check other demos on my site Follow me on Twitter Feedback
この記事はHTML5 Advent Calendarの8日目です。 いつの間にか手元の環境(Chrome17 dev + Node 0.6.3)においてWebSocketでバイナリデータが扱える様になっていたので何か作ってみようかと。 まず、NodeでWebSocketを使おうとしたらそれ用のライブラリを使う事になるのだが現時点でバイナリデータが扱えるのはWebSocket-Nodeのみだった。 当初はサーバーから画像のRAWデータをガンガンクライアントに送りまくるというのを作ろうとしたのだがnode-pngがNodeの0.6系に対応していなかったので断念。CanvasのgetImageDataで得られるデータをそのままサーバーに投げて、サーバー側で加工した物を受け取るサンプルを作った。 バイナリデータの送信 クライアントのコード(client.js) var socket = null;
∧_∧ _（ ´・ω・）_ /＼`'⊃(;;ﾟ;;) ＼ ＿＿＿ ／ ※ ＼_＿＿＿_|＼＿＿ヽ ＼※ ※ | |_三三|_＜ はじまるよ！ ＼ / ※ ※ ※!､_ |||＿＿|､ `─────||ヽ───i§ ヽi |`〜〜 JavaScript でも 3D くらい できるさ！ amachang 先生の 次回作にご期待ください ∧∧ （ ･ω･） ＿| ⊃／(＿＿_ ／ └-(＿＿＿_／ ￣￣￣￣￣￣￣ - 完 - ごめんなさい ごめんなさい＞＜ DOM パフォーマンス チューニング JavaScript の 誤解 JavaScript は 遅い JavaScript は そこそこ速い 論より証拠。 ベンチマーク マージソート 100 numbers × 3000 times JavaScript ActionScript code: http://s
あっきーパパが Google の新しい CATCHA の論文を紹介してたので グルグル回すグーグルの新CAPTCHA特許 | 秋元@サイボウズラボ・プログラマー・ブログ 脊髄反射で作ってみた （UI の部分だけですが；；；） http://amachang.sakura.ne.jp/misc/kurukuru/（IE では動きません） jQuery UI と canvas を使ってます。初めて使いましたが、いいですね、 jQuery UI。 （追記）せっかくなのでソースコードの解説 // 初期値の設定 // prev_value は最後に設定された値の保持用 last_value のほうが良かったかも var start_value = Math.PI, prev_value = start_value; // 回転用イメージオブジェクト var img = new Image; // i
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
