タグ

canvasに関するrti7743のブックマーク (5)

  • 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
  • Loading...

  • HTML5 Canvasのブラウザによって異なる微妙な振る舞いについてまとめてみた。 - 風と宇宙とプログラム

    はじめに CanvasはHTML5とは切り離された独立した仕様(HTML Canvas 2D Context)になっているようですが、現状のブラウザ上でのCanvasのについて、普段はあまり気にしない微妙な振る舞いについて調べた結果をまとめてみました。 調べたブラウザの各バージョンは以下の通りです。 Firefox Chrome Safari Opera 3.6.8 6.0.490.1 dev 5.0.1 10.61 線を描く (lineTo) ただの直線を描くだけのlineToですが、その単純なものにも、恐らく、多くの人が普段は気にしないような問題があります。それは座標値とアンチエリアスです。詳しく見る前に、実際の結果を示しましょう。下記のイメージ中に描かれている線は、いずれも線幅(lineWidth)が1の線です。 (左から、Firefox, Chrome, Safari, Opera

  • ASCII.jp:HTML5のCanvasで作る、Flash不要のお絵かきツール|古籏一浩のJavaScriptラボ

    HTML5 Canvasで作った「シンプルペイント」。ペンの色とサイズが選べ、保存もできる。画像クリックでサンプルページを表示します(Firefox 3/Opera 10/Safari 4で表示可能) HTML5の新機能で特に注目を集めているのが、Flashなどのプラグインを使わずにWebブラウザー上でグラフィックを描画できる「Canvas」です。Canvasは、すでにInternet Explorer(IE)をのぞく、ほとんどのブラウザーに実装されていますし、マイクロソフトは現在開発を進めている「IE9」でHTML5を積極的にサポートするとしていますから、IE9にCanvasが実装される可能性は高そうです(ただし、現在公開されているPlatform Preview版ではCanvasは実装されていません)。すべての主要ブラウザーでCanvasが利用できるようになれば、画像処理を伴うWebア

    ASCII.jp:HTML5のCanvasで作る、Flash不要のお絵かきツール|古籏一浩のJavaScriptラボ
  • canvasに描いた絵(画像)をサーバに保存 - 超自己満足プログラミング

    canvasに描かれたデータを取得するには、canvas.toDataURL() を使います。 toDataURL()で得られるのは、base64エンコードされた画像情報なので、 それをサーバに送って、base64デコードして保存という流れです。 toDataURL()して、そのデータをPOSTする部分のjavascript (ajax部分が面倒なので、prototype.jsを使用) function saveImage() { var imgdata = $('canvas_id').toDataURL(); // デフォルトだとpng, 引数でjpegとかも可能 imgdata = imgdata.replace('data:image/png;base64,', ''); // 頭のいらない部分を落とす new Ajax.Request(<画像保存CGIのURL>, { param

    canvasに描いた絵(画像)をサーバに保存 - 超自己満足プログラミング
  • 1