タグ

canvasに関するkitokitokiのブックマーク (6)

  • GitHub - canvg/canvg: JavaScript SVG parser and renderer on Canvas

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    GitHub - canvg/canvg: JavaScript SVG parser and renderer on Canvas
  • HTML5 CanvasとWebGLの高解像度対応はどこまで行うべきか - ICS MEDIA

    2016年2月3日(水)、ICTCOにて100人の定員規模で開催されたセミナー「DIST.10 デザインとJavaScript」。その中で「HTML5 Canvasコンテンツの高解像度対応はどこまで行うべきか」というタイトルで登壇しました。今回はその発表資料を記事として公開します。 FWAでピックアップされているサイトでは70%がcanvas要素を使っている モーショングラフィックや3D表現等のリッチな表現をWebコンテンツで行う場合、canvas要素は不可欠です。FWAのSITE OF THE DAY(※)で調査したところ、2015年11月から3ヶ月間の91件中61件(約70%)のサイトでcanvas要素(Context2D、WebGL)が使われていました。 ※ FWAは世界的権威のWebデザインアワードで、優れたデザインのWebサイトを毎日1つずつ「SITE OF THE DAY」とし

    HTML5 CanvasとWebGLの高解像度対応はどこまで行うべきか - ICS MEDIA
    kitokitoki
    kitokitoki 2016/02/19
    「canvas要素を高解像度対応する標準的な方法は、2倍サイズのコンテンツを作って半分に縮小すること」
  • Fabric.js Javascript Canvas Library

    Fabric.js is a powerful and simple Javascript HTML5 canvas library Fabric provides interactive object model on top of canvas element Fabric also has SVG-to-canvas (and canvas-to-SVG) parser Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes

  • canvas : 画像の合成方法いろいろ - WebOS Goodies

    使い方がわかったところで、実際に試してみましょう。以下のサンプルでは、合成モードを変更して効果の違いを確かめられます。ついでに描画する図形(パス or ビットマップ画像)、透明度、描画色なども変更できますので、それぞれを組み合わせてどのような効果が得られるかも確認できるようにしておきました。 ※ペンギンの画像は Image * After で公開されていたものを Flickr に保存して利用しています。 ディスティネーション画像の下半分は半透明で描画しています。ただし Opera では画像に対する半透明指定は機能しません。また、透明部分が確かめやすいように背景画像を設定していますが、この背景は CSS の background-image プロパティーによるものであるため、 globalCompositeOperation の影響を受けずに描画されます。ソースは以下のようになっています(簡

  • HTML5花火大会から学ぶcanvasの表現力

    HTML5花火大会が始まりました! jsdo.itに集まった400以上の花火コードが、夏の夜空に打ち上がっています! 当にどの花火もクオリティーが高くて、見るだけでも楽しめます。 HTML5花火大会 花火のコードから学ぶcanvasの表現力 花火のコードの大半はHTML5のcanvas要素を使って描画されています。 canvasってなんだっけ? javascriptから自由にグラフィックを描画できる要素です。 以下のエントリーにわかりやすくまとまっています。 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル(かつ動的な)表現が行えるわけです。 今更聞けないcanvasの基礎の基礎 canvasで花火を描くには? 花火のお手コードから見ていきま

  • CanvasアニメーションをHerokuで公開しようよ! - hp12c

    ブログを下記に移転しました。デザイン変更により移転先では記事が一層読みやすくなっていますので、よろしければ移動をお願い致します。 CanvasアニメーションをHerokuで公開しようよ! : melborne.github.com - もしあなたが暇で暇でしようがなくて 一日中時計をぼーっと眺めるのも悪くない と考えているのなら 次のリンクをクリックしてください 3分くらいならあなたの時間をつぶせるかもしれません http://aclock.heroku.com/ もしあなたがRubyを使っていて JavaScriptのことはよく知らないけれども HTML5のCanvasに興味がでてきて その成果物をネットで簡単に公開できればうれしいかも と考えているのなら 以下の記事を読む価値があるかもしれません もちろん何の保証もありませんが.. Canvasを使ったWebアプリケーションの構築 この

    CanvasアニメーションをHerokuで公開しようよ! - hp12c
  • 1