タグ

javascriptとcanvasに関するmaRkのブックマーク (5)

  • JSでオセロ盤表示 - teruuuのブログ

    Canvasタグでオセロ盤表示 JSとCanvasタグを利用してオセロ盤の表示を行います。 最近はJSでゲームを作る場合enchant.jsやtmlib.jsなどといったフレームワークが 充実しているようだが基礎を大切にしたいのでまずは素のJSで作ってみようと思う。 ○作成に当たって jsでの開発用環境としてBracketsを利用することにした。まだあまり 使い慣れていないが補間の能力がすごく優れていた。それからライブプレビューで編集結果の リアルタイム反映でデザイン調整には便利な機能に力を入れている。 またNode.jsが標準で同梱されているなど、jsでの開発を行う人にはとってもお勧めできそうな気がする。 ○まずは、canvasタグ オセロ盤の表示にはhtml5のCanvasタグを使う。Html5を使う場合ブラウザにもそのことを明示 的に伝えることが推奨であるので、気にするのであればドキ

    JSでオセロ盤表示 - teruuuのブログ
  • アナログ時計を作ってみよう! | Canvasを試してみませんか? | Think IT(シンクイット)

    作成するアナログ時計 さて、最終回の今回はこれまで学んできたCanvasのテクニックを応用して、アナログ時計のjsライブラリを作ってみましょう。図1に完成図を示します。 まず時計の文字盤を画像ファイルとして用意し、それをCanvasに組み込み表示させます。そして、短針、長針、秒針を、Canvasの直線を使って表現します。これら一連の処理をsetIntervalを使って1秒おきに描画しなおします。 ここで解説するjsライブラリは、どのページにも問題なく簡単に組み込めるように作成します。Canvasのテクニックだけではなく、jsライブラリ作成のポイントも一緒に学んでいきましょう。 変数名の重複に注意 JavaScriptは、jsファイルとして機能ごとに分離することができます。しかし、ファイルを分離したからといって、グローバル変数や関数がそれぞれのjsファイル内に隠ぺいされているわけではありませ

  • JavaScriptで作られたGAMEBOY COLORエミュレーター | スラド

    以前のストーリーでJavaScriptによるPCエミュレーターが紹介されたが、今度はJavaScript/HTML5によるGAMEBOY COLORエミュレーターが作成されたそうだ(GameBoy Online、 IProgrammerの記事、家/.)。 GAMEBOY COLORエミュレーターを作成したのは米フロリダの19歳、Grant Galitz氏。ローカルに保存したROMイメージを読み込んで実行可能となっており、実際に遊べるスピードで動作する。サウンドの再生も可能だ。 グラフィックはCanvasオブジェクトを使用して実装されるが、Canvasがサポートされない場合にはビットマップイメージが使われるとのこと。ソースコードも公開されている。

  • JavaScriptで3D - os0x.blog

    id:wanparkさんが(3年前に)書かれたchannel3というFlash用3DグラフィックライブラリをJavaScriptにポーティングしてみました。IEは未対応です(たぶんそのうち)。 channel3JS - ss-o.net この前のCanvasでDot3Dが結構余裕だったので、もうちょっと格的な(だけどライブラリとして大きすぎないような)のをポートしたくなったところにchannel3のことを思い出して、突貫でやってみました(コメントアウトいっぱいでソースは綺麗じゃないです)。 SVGとCanvas両対応です。なぜかというとパフォーマンスを比べたかった(SVGのほうが良い)のと、テクスチャやるにはCanvasが必要になりそうだから。 実はSVGほぼ初めて触ったんですが、面白いので後でまとめようと思います。 ソースは os0x / channel3JS / source — B

    JavaScriptで3D - os0x.blog
  • 「HTML5のcanvasで作る画像フィルター」は自分ならこう書く - by edvakf in hatena

    ASCII.jp:HTML5のcanvasで作る画像フィルター|古籏一浩のJavaScriptラボ こちらの記事をたまたま拝見して、コメント欄もなければトラックバックもできないようなので、どうやって反応を返せばいいのかわからないけれど、もし古籏一浩さんご人が見てくれたらいいなあ、ということで書きます。 全体的にはとても素晴らしい記事なのですが、いくつか言いたいことがあります。 ImageData まず、CanvasRenderingContext2D#createImageData というメソッド。これは知りませんでした。 Opera には window.ImageData というグローバルオブジェクトとして似たものが定義されています。(createImageData と違い、第三引数に配列を渡せるのが特徴ですが) if (window.CanvasRenderingContext2D

    「HTML5のcanvasで作る画像フィルター」は自分ならこう書く - by edvakf in hatena
  • 1