[B! canvas] Jxckのブックマーク

まだシングルスレッドでレンダリングしてるの？ HTML5 CanvasとWeb Workerの最新技術 - pixiv inside [archive]

こちらはピクシブ株式会社 Advent Calendar 2016、13日目の記事です。こんにちは！4月からピクシブに入社したエンジニアの@_ragg_です✨ メンテナンスチーム・pixivFACTORYチーム・pixiv FANBOXチームを旅して、デザインをかじったりフロントエンドを触ったりしています、3代目社内旅行エンジニアですね！さて、今回はHTML5 Canvasに実装されつつあるOffscreenCanvasと、Web Workerについてお話しします。まだ日本語文献の少ないアツアツのネタです🔥🔥 OffscreenCanvas #とは OffscreenCanvasは、「画面に表示されないCanvas」です。かつて CanvasProxy と呼ばれていたのをご存じの方もいると思います、まさにそれです。「画面に表示されないCanvas」は、「表示前に何段階か画像の加

Jxck 2016/12/14

リンク

CreateJSとNode.jsを使ってサーバーサイドでCanvasを扱おう–ICS LAB

HTML5 Canvasのフレームワーク「CreateJS」(基本的な使い方は入門サイトをご覧ください）について、2015年2月10日に開催されたCreateJS勉強会 (第5回) でライトニングトーク「CreateJSとNode.jsを使ってサーバーでCanvas要素を使おう」を発表しました。今回はそのスライドを元に、サーバーサイドでCreateJSを使うメリットを紹介します。デモ今回紹介するnode-easelを使ったデモです。スマホ画面にTwitterのアイコンが、PC画面には白い矩形が表示されています。スマホで選んだTwitterのユーザーのアイコンがPC側でアニメーションします。画像加工はサーバーサイドで動くCreateJSを使って行われています。 Section1. Node.jsとモジュールについて Node.jsはブラウザではなくサーバーサイドで動くJavaScript

Jxck 2015/02/19

リンク

HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編) ― ICS LAB

2015年2月10日（火）、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容もできる限り記載しました。なお、前編（CanvasとWebGLの比較）と後編(WebGLの最適化)の二部構成にしています。前編となる本記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト）は従

Jxck 2015/02/17

webgl
canvas

リンク

rails3 + html5 canvasでお絵かき投稿サイトを作ろう！

はじめましてこんにちは。 KRAYアルバイトの浅海です。 html5のcanvasを使ってお絵かき投稿サイトを作ってみようと思います。初めてブログ記事を書くということで気合が入りました。ちょっと長めですがお付き合い下さい。機能お絵かき投稿サイトの必要最低限な機能って？ざっと下のような機能を入れてみます。絵を描ける絵を消せる描画を一回分戻れる線の太さを変えられる線の色を変える絵を投稿できる投稿された画像の一覧を表示できる → 完成見本はこちら完成見本の公開は終了致しました。絵を描ける HTML5のcanvasにマウスの軌道に線を引いていくわけです。 canvasでのマウス軌道の描き方は、・mousemoveイベント発生時に点をプロットという手段が真っ先に思い浮かぶと思いますが、これは、以下の様になります。これではお話になりません。なので、点ではなく線を引くこ