Canvasリファレンス
パス context . beginPath() …… 現在のパスをリセットする context . moveTo(x, y) …… 新しいサブパスの開始点を座標指定する context . closePath() …… 最終座標と開始座標を結んでパスを閉じる 直線（多角形） context . lineTo(x, y) …… 直前の座標と指定座標を結ぶ直線を引く ベジェ曲線 context . quadraticCurveTo(cpx, cpy, x, y) …… 2次ベジェ曲線を引く context . bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) …… 3次ベジェ曲線を引く 円と円弧 context . arcTo(x1, y1, x2, y2, radius) …… 直前の座標と直線でつながる円弧を作成する context . arc(x,
canvasをバイト単位で修正する方法（ImageDataの使い方） - KAYAC Engineers' Blog
引っ越ししました。agoです。 思いっきりネタがかぶってますが、あまり気にせずcanvasネタを書いてみたいと思います。 今回はcanvasの中でもImageData関係をまとめて見ました。 ImageDataってなに？ canvas内のバイト列を扱うためのObjectです。 canvas内の各バイト毎に赤、緑、青、透明度の情報を配列として保持しています。 何に使うの？ canvas内をバイト単位で修正したい場合に使います。 canvas内に図形等を書く場合、通常提供されているlineTo等を使用することも出来ますが、こういった抽象メソッドは一回ごとの呼び出しコストが大きいため、細かい単位の操作には向きません。 その点、ImageDataであればバイト単位での操作しかできない代わりに呼び出し毎のコストが小さいため、細かい単位の操作も高速に行うことができます。 ただ、もちろん線を引く、丸を書
CoffeescriptでsetIntervalを実行した際にthisを認識できずにコケる - Less is Best
CoffeescriptでsetIntervalを実行した際にthisを認識できずにコケるバグが発生。 ソースの概要はこちら class Main render: -> @ctx.drawImage(@video, 0, 0) videoStart: -> @timer = setInterval(@render,100) Chromeのデバッカで確認してみたところ、windowプロパティしか認識していない。うまくthisを拾えていないよう。原因はsetIntervalがグローバルな場所で実行されていることだと判明。 ぐぐってみるとstackoverflowで解決方法を発見 要は、thisをバインディングしてしまえばオッケー！ ってことで、render:-> を render: =>に変更してバインディング。 class Main render: => @ctx.drawImage(@vi
Navigator: getUserMedia() method - Web APIs | MDN
Media Capture and Streams APINavigatorInstance propertiesactiveVRDisplays Non-standard Deprecated appCodeName Deprecated appName Deprecated appVersion Deprecated bluetooth Experimental buildID Non-standard clipboardconnectioncontacts Experimental cookieEnabledcredentialsdeviceMemorydoNotTrack Non-standard Deprecated geolocationglobalPrivacyControl Experimental Non-standard gpu Experimental hardwar
createObjectURLとは何か？ - NullPointer's
createObjectURL、省メモリだとかaudioの再生がスムーズだとか言われてるけど、これが何物なのか日本語の詳しい説明が見当たらないので、自分の理解を書いておく。File APIの仕様書を軽く流し読みして得た理解なので正確さは保証しない。ま、大筋は間違っちゃないと思う。 createObjectURLはFileオブジェクトのURL（Blob URL）を作成するもの。httpスキームのURLがサーバ上のリソースを指しているように、Blob URLは自分のPCのメモリ上にあるリソースを指し示す。 FileReaderのreadAsDataURLメソッドを使うとfileオブジェクトを元にURLを作成できるが、これはData URLで、URLエンコードされたファイルの中身そのもの。よって、ファイルを読み込んでData URLを作成すると、JavaScriptエンジンはファイルサイズに比例
html5で videoの任意のフレームをcanvasに描画するメモ - 超自己満足プログラミング
デブサミ2010のhtml5セッションで見たデモ（Movement tracker）*1 が、 衝撃的だったので video x canvas をちょっと勉強した。 １．videoの任意のフレームをそのままcanvasに描画させてみる htmlのbodyに書くにはこれだけ。 <video id="v" src="video.ogv" autobuffer controls></video> <canvas id="c"></canvas> <input type="button" value="copy frame" onclick="copyFrame()" /> copy frameボタンで呼び出されるjavascriptはこんな感じ。 function copyFrame() { var cEle = document.getElementById('c'); var cCtx =
【スマホ×HTML5】Web&ハイブリッドアプリ開発者ブログ
【スマホ×HTML5】Web&ハイブリッドアプリ開発者ブログ このブログでは、HTML5+CSS3+Javascriptなどの情報を定期的に提供していきます。 運営企業：株式会社ニーロク（http://i26.jp/）
[HTML5]getUserMedia APIを使ってカメラを表示させてみる – o24ブログ
本日Chromeのバージョン21がリリースされ、getUserMediaが実装されたようです。 getUserMediaを使うと、javascriptを使ってカメラにアクセスできるようなので、やってみました。 参考にしたページは以下 getUserMedia API <body> <video autoplay width="640" height="480"></video> <img src="" width="640" height="480" > <canvas style="display:none;" width="640" height="480"></canvas> <div id="wrapper"> <button id="capture">capture</button> <button id="stop">stop</button> </div> </body> <
![[HTML5]getUserMedia APIを使ってカメラを表示させてみる – o24ブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Call an anonymous function defined in a setInterval
Canvasリファレンス - HTML5.JP
長文日記