Canvas#drawImage で縮小した際に綺麗に表示する幾つかの方法 - Qiita
Canvas#drawImage を使ってかなり大きな画像を縮小表示すると、派手にジャギーが発生する事があります。(drawImage のデフォルトのフィルターが速度優先らしく、現状このようになってしまうとか) antialias を効かせるか、もうちょっと綺麗に表示する方法が無いか色々と探ってみました。 方法1. canvasContext.drawImage(source, sx, sy, sw, sh, tx, ty, tw, th) を使って描画する方法 画像1 と 2 の Original がこれです 方法2. HTML5 Rocks にあるように ratio = devicePixelRatio / backingStoreRatio を計算し、canvas のサイズ(width, height)と canvas のviewサイズ(style.width, style.heig
ChromeのコンソールでYoutubeを観るやつ作った - マルシテイア
便利 fand/console-tube · GitHub 何これ 普通にインターネットしてると一日数回、Chromeのデバッグコンソールでyoutube動画見たくなる事がある。 デバッグ中、「あっYoutube観なきゃｍ，見る必要がある」ってなる。 おもむろにタイプ 観れた! 音も出る！ 使い方 README.md参照。 どうなってｒの console.tube(url) すると、現在ページに隠しvideo, canvasを追加 予め立てたexpressサーバにurl渡して、動画をストリームで返す。 canvasにvideo描画 定期的に console.log("%c", "background: url(" + canvas.toDataURL() + ")"); する 小話 console.imageっていう便利ライブラリあって、真似したかった。 最初、Youtubeから直接動画読
iOSプログラマへ。HTML5 Canvasがおもしろい！ | DOTAPON Blog
…という題で、発表してきました。 さいたま開発勉強会 vol5です。 iOSのCore Graphicsと共通点の多いHTML5 Canvas。 iOSプログラムの経験がまるごと活かせるぜ！面白いものつくろうぜ！ ということをお伝えしたく、実際に手を動かす場面を取り入れてみました。 実際に効果があったかどうかは…わかりません (^^;) 入門的な位置づけに仕上げてみましたので、iOSプログラマの方もそうでない方も、ぜひ触ってみてください。 iOSプログラマへ。HTML5 Canvasがおもしろい！ from cocopon 練習用の「HTML5 Canvas スターターキット」はこちらから。 マウス・タッチイベント両対応のInputManagerが付属していますので、ぜひご活用ください :) CanvasStarterKit_100.zip
要約: Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話
2012 年 9 月 26 日 追記しました。 要約エントリー。 元記事 : iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas> アップルのサイトの iPhone5 のページにある「スライドしてアンロック」のアニメーションが、信じられない実装になっている、という話。簡単に要約してみた。（ミスなどの指摘は @lowply までお願いします） もともと h.264 と WebM の動画フォーマット戦争でブラウザ互換性の問題がまだ残っている上、iPhone などは「再生ボタン」を押さないと再生できなかったりするので、こうした短いアニメーションに video タグを使うことは最適解ではなかったらしい。 そこで発想の転換をして、Retina MBP のページでは、蓋が開くたった 2
HTML5 Canvasデスクトップリファレンス
HTML5の一部として仕様が策定されているグラフィック描画のためのJavaScript API、Canvasについて紹介する書籍です。Canvasの2Dオブジェクトの描画に関する簡単なチュートリアルとリファレンスから構成されており、仕様の全体像を簡潔に知ることができます。Canvasでプログラミングをする際には手元に置いておきたい1冊です。なお本書はEbookのみの販売となります。 はじめに 1. Canvasチュートリアル 線の描画と多角形の塗りつぶし グラフィック属性 Canvasの寸法と座標 座標系の変換 座標変換の数学的な理解 座標変換のサンプルコード 曲線の描画と塗りつぶし 矩形 色、透明度、グラデーション、パターン 線を引くための属性 テキスト クリッピング 影 画像 合成 ピクセル操作 ヒット判定 Canvasの実例：Sparkline 2. Canvasリファレンス Can
OpenGLなにそれうまいの?? という人のためのWebGLの始め方 - hagino3000's blog
追記：例題の頂点シェーダーで何をしているか説明を追加しました 追記：動作環境の所修正しました、IE9では動作しません。 皆さんはじめまして、荒川智則です。この記事はJavaScript Advent Calendarの21日目です。 この記事では、Google I/OやFirefox Developers Conferenceで華麗なデモがバリバリ出てくるにもかかわらず、実際に使っている人が異常なまでに少ないWebGLについて書きます。対象読者はWebGLに興味があるor手を出してみたけどクソ難しそうだし既に諦めそう、という人です。 WebGLの概要 WebGLはOpenGL ES 2.0のグラフィックAPIをCanvas要素上で使える様にした物です。OpenGL ESはOpenGLの組み込み機器向けのサブセットで、iPhoneやandroid端末にも搭載されています。OpenGL ESな
第1回 SVGの基礎知識 | gihyo.jp
SVGは比較的古くからある仕様の1つですが、2010年3月にマイクロソフトがInternet Explorer 9でのサポートを表明してから一気に注目が高まりました。そんな古くて新しいSVGを今から使える情報と、将来の展望を全4回の集中連載で解説します。 SVGとは SVG（Scalable Vector Graphics）は、XMLベースのベクターグラフィック言語もしくは画像フォーマットです。W3Cによってその仕様が定義されており、画像フォーマットとして用いる場合は拡張子.svgが使用され、MIME形式はimage/svg+xmlが用いられます。 SVGの現状 Firefox、Safari、Google Chrome、Operaなどのブラウザが既にサポートしており、Internet Explorerもそのバージョン9、具体的にはInternet Explorer 9: Platform
まずは基本から・HTML5のCanvasについて参考になったサイトまとめ
WebデザインHTML5 Canvas ようやくHTML5に興味を持ち 始めました。サンプルを以前 記事にして、凄いなーと思っ ていましたが、なかなか時間 がなく、先延ばしに。 ようやくHTML5に興味を持ち始めました。 サンプルを以前記事にして、凄いなーと 思っていましたが、なかなか時間がなく、 先延ばしに。で、ようやく頭に入れ始めま した。なにするにも行動が遅くて困ります。 HTML5でも話題になっているCanvasを勉強し始めました。そんな中で、勉強の参考になりそうなサイトをブクマしたのでこれから学ぼう、とお考えの方とシェアしたいと思ってエントリー。 というわけで、基本的な情報がほとんどです。大量の情報を見ても混乱するのである程度絞っています。 html5.jp リファレンスサイトです。リンク先はcanvasカテゴリに。ここからスタート、というか最後までたぶんお世話になりそう。 ht
クロスドメイン画像はピクセル操作できない - NullPointer's
HTML Canvasでクロスドメイン画像のピクセルを加工することはできない。 クロスドメインの画像をdrawImageすることはできる。しかし、クロスドメイン画像をdrawImageしたcanvasからgetImageDataしようとするとエラーになる。 $("<img>").attr("src", "http://www.hatena.ne.jp/users/pa/paulownia/user.jpg").load(function(){ var canvas = document.createElement('canvas'); canvas.width = this.width; canvas.height = this.height; var c = canvas.getContext('2d'); c.drawImage(this, 0, 0, this.width, this
jQueryでcanvasを扱うときは画像読み込みのタイミングに注意 - NullPointer's
jQueryの $(function(){ ... }) は、ページの load イベントではなく、DOMContentLoaded というイベントをトリガにして実行されます（Firefoxの場合）。このイベントはHTMLファイルがロードされDOMツリー構築が終了したときに実行されます。画像などの重いコンテンツのロードが始まる前に実行されるため体感速度が向上します。 しかし、以下のようにDOMContentLoadedをトリガにしてページ内の画像をcanvasで処理しようとすると、まだ画像が読み込まれていないためエラーになることがあります*1。 $(function(){ $("img").each(function(){ var canvas = document.createElement('canvas'); var c = canvas.getContext('2d'); c.dr
canvasでキラキラした背景を作る方法 - KAYAC engineers' blog
tech.kayac.com、ささやかにリニューアルしました！ tech.kayac.comをご覧の皆さん、はじめまして。意匠部ME課のfuchigamiといいます。 どうして技術部ブログに意匠部の野郎が？って感じですが、 技術部ブログのリニューアル記念ということで、ちゃっかりcanvasについて記事を書こうと思います。 最初なので、、、 簡単にぼくの属性を説明すると、html5とか好き、CSS3とか好き、canvasとか興味ある、非モテ、javascriptはjQueryがなんとなくわかる程度、非リア充。こんな感じです。 今回のリニューアルではコーディング全般を担当しました。 特に、プログラミングに関してはド素人だ！ということを強調しておきます。 そんなぼくが、canvasを使ってキラキラした背景を作ってみました 「リニューアルするからには新しいことがやりたいよね。だったらhtml5とc
今更聞けないcanvasの基礎の基礎 - KAYAC engineers' blog
はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね！」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Firefox3.6.3、Chrome5.0で動作を確認しています。 canvasってなんぞ？ 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 とりあえずつかってみる 早速何か描いてみましょう。 こういうことは実践あるのみです。 処理にはJavascriptを使います。 canvasに描画を行うときは、canvas要素からcontextを取得して、
canvasタグを8倍高速化する方法＆FlashCanvasが4倍速くなった - yukobaのブログ
最近、ブログを書いて、毎回、読んだくださった方から、貴重な情報を教えてもらっています。大変ありがとうございます。 ベンチマーク for canvasタグとcanvas on Flash 2010 - yukobaのブログですが、コメント欄＆http://www.revulo.com/blog/20100311.html#p01によると、drawImage()で渡す座標は、仕様上 "float" となっているのですが、ここに "int" を渡すと高速化するそうです。具体的には、Math.random() * 750 を Math.random() * 750 | 0 にします。"| 0"で、float → int です。 また、FlashCanvas Pro は今、1.2 α3 ですが、1.2になって、高速化したので（上のブログ参照）、それを含めてテストしてみました。 ブラウザ 時間 高速化
JavaScript によるオーディオ＆ビジュアルプログラミング - Radium Software
僕は JavaScript が好きだ。できるだけ多くのことを JavaScript で済ませてしまいたいと考えている。 以前は JavaScript では絵や音を扱うことができないという点がボトルネックになって，応用の幅を狭めていた。これが最近になると， Canvas 要素のおかげで絵を扱うことができるようになったり， Flash を代行役にすることによって音を出せるようになったりと，いろいろ状況が変わってきている。 そこで今回は，以前から機会があれば触ってみたいと思っていた Processing.js と SoundManager 2 を使って， JavaScript によるオーディオ＆ビジュアルプログラミングに挑戦してみた。 Processing.js とは Processing.js は，ビジュアルデザイン向けプログラミング言語 Processing を模して作られた JavaScr
JavaScriptで画像のオフラインキャッシュを実装する - KAYAC engineers' blog
もうすぐクリスマスシーズンなんですかね？本間です。 巷で話題のイケメンホイホイ（以下イケホイ）ですが、このたびiPhone用サイトがオープンしました。 それにあわせて新機能も搭載！イケメン写真にタグを付ける機能と、iPhoneでぼんやり眺めているだけで楽しいビューア機能です。 タグ機能はPC版にも搭載されましたので、ぜひぜひみんなで色んなイケメンにタグを付け合ってくださいね。 タグが付くことで、オススメの精度が上がりますよ！ ビューア機能は、自分がゲットしたイケメンズがiPhone上で次から次へと表示される機能です。 オフラインでも表示できる機能付き！ 電車の中で見るも良し、卓上に置いて眺めるも良しです。 あなた好みのイケメンがゾロゾロ。イケメンホイホイのサイトはこちら！ …うーん、ユーザ層がかぶらなそうだな、この記事。 さてさて、本題はHTML5の機能を使った画像のオフライン表示について
マイクロソフトがHTML5仕様からCanvas要素を外すように提案、しかし一刀両断に...
HTML5の仕様を議論するメーリングリストで、マイクロソフトがCanvas要素をHTML5から外すことを提案したことが、いくつかのニュースサイトで報道されています。マイクロソフトは主要なWebブラウザのベンダとして唯一Canvas要素を実装しておらず、そのベンダが「HTML5の仕様からCanvas要素を外した方がいいのでは？」という提案をしたことで騒ぎになっているようです（参考：Ajaxianのニュース、Webmonkeyのニュース）。 以前からあったCanvas分離の議論 HTML5の仕様からCanvasを外し、Web WorkersやWeb Storage、Web SocketsのようにHTML5の周辺仕様として独立して議論を進めようという提案は以前からありました。 その理由として、Canvasについての議論がHTML5全体の進捗を遅くしており、分離した上で機能やアクセシビリティの向上
JavascriptとCanvasによるファミコンエミュレーター
JSNES: A Javascript NES emulator JavascriptとCanvasを使ったNES(ファミコン)エミュレーターを実装したと主張している。Chromeならば、パフォーマンスも申し分ない。 にわかに信じられないが、どうやら本物らしい。 もし本当だとしたら、本物のROMを使用しているようなので、合法ではないのであまり深く追求しないが、ソースをみる限り、本当にエミュレーターを実装しているらしい。サイトの説明によると、vNESというエミュレーターを、JavascriptとCanvasを使うように移植したのだとか。 ところで、もし本物だとして、本当に本物のカートリッジからダンプしたROMを使っているのだとして、一体どうやってJavascriptからバイナリファイルを扱うんだろうと思って調べてみた所、どうやら、バイナリファイルではなく、スラッシュ区切りの十進数文字列にして
MicrosoftがHTML5からcanvas 2Dの仕様からの分離を提案。 - k3akinoriのWebデザインの日々日記
twitterでHTML5watcherをフォローしていたら気になる情報が。 HTML5watcher RT @p_g_: RT @t_trace: MSがCanvasをHTML5から外そうよって提案してる。してる。 RT @tweetmeme Microsoft Wants to Separat… HTML5watcher RT @HenrikJoreteg: Microsoft wants canvas removed from HTML5 [...]would reduce the need for Silverlight http://tr.im/CO9Y via @fak3r @jen… 早速それぞれの情報源にアクセスしました。リンク（いずれも英文です）：一つ目の情報源、二つ目の情報源。 英語は苦手ですが、それぞれ何が書いているのか翻訳にチャレンジしてみました。一部はGoogle
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Canvas Cheat Sheet
HTML5 Video Destruction