目指すのはぶっちぎりの速さ! なぜ HTML5 版CacooはSVGを採用するのか | 株式会社ヌーラボ(Nulab inc.)
こんにちは！ Cacoo チームの中原です。現在CacooチームはFlashで作られている図の編集画面(以下エディタと表現します)を* HTML5 で置き換える開発を進めています。このブログでは、 HTML5 版 Cacoo で図形の描画に使用される、SVGを選択した理由と経緯について説明したいと思います。 （*置き換える理由については「Good-Bye Flash ~ CacooはHTML5で生まれ変わります」をご覧ください） どの技術を使って図形を描く?重視したのは「パフォーマンス」 図形の描画にどんな技術を使うか。いくつか候補を上げました。 2D Canvas 3D Canvas (WebGL) SVG (これ以外に、Unityという意見もありましたが今回はWeb標準技術を使うことを前提にしました。) さて、どれを使おう。私たちがどの技術を選択するのか、基準を決める必要があります。そ
ソースコード管理(git)の説明資料を作るのに gitgraph.js を使ってみた - Qiita
ある程度大きな(人数的にも、ツール等の依存環境的にも)プロジェクトになってくると、気づかないうちにソースコード管理に属人的なファクターが生まれるもので、そういうのをドキュメント化するのにそこらに転がっているgit-flowの絵とかでは説明しきれない場合があります。 というかありました。 なにかないかなーと彷徨っていた時に、jsでサクッとコードを書くとgitのヒストリーの図を出せるライブラリがあったので、これを使って資料作ったら捗ったので紹介します。 gitgraph.js http://gitgraphjs.com/ とりあえず図がほしいだけなので適当な下準備 gitgraph.js はnpm/bowerだけでなくCDNにも上がっているので、ペライチでHTML書いて、使う準備をします。 js/cssをロードします bodyにcanvasを用意します jsの <html> <head> <s
web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
WebRTC getUserMedia 簡単Webカメラ - jsdo.it - Share JavaScript, HTML5 and CSS
2013/11/25 taock WebRTCのgetUserMediaを利用して、カメラ、マイクの動画、音声を取得するサンプルです。 canvasに動画キャプチャを表示する機能が付いています。 //APIを格納 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; //window.URLのAPIをすべてwindow.URLに統一 window.URL = window.URL || window.webkitURL; if (!navigator.getUserMedia) { alert("カメラ未対応のブラウザです。"); } // 変数 var canvas =
JavaScript 相対的なマウス位置を取得する | TM Life
※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです. canvasでゲームを作る際に、canvasの左上を基準としたマウス位置を 取得する処理が必要になることが多々あったのでその方法をメモっておきます。 Sample canvas内にマウスを乗せるとその位置が表示されます。 左上にマウスを置くと Mouse X, MouseY が (0, 0) に、 右下にマウスを置くと (640, 480) になるのがわかると思います。 http://tmlife.net/examples/mouse-pos/ Source 流れ 相対位置を取得したい要素に”mousemove”イベントを登録 その中で、コールバックの引数eを使用し”スクリーンを基準とした位置(e.clien
canvas要素の基本的な使い方まとめ
Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています．えーと，そりゃもうゴリゴリと． 本文書はsvg要素の基本的な使い方まとめの姉妹版として作成を開始した．canvas要素の仕様は現在進行中で色々と変化しているため，一筋縄で行かないが大方のapiについて書き上がったので公開する．なお，まだ使えない機能等満載だったり，内容に間違いがあっても中々検証することができないので，その部分を了承した上でご利用下さい… 更新履歴 2012/07/18 初版 1・canvas要素の概観 canvas要素とは canvas要素はhtml5で採用されたwebブラウザ上でグラフィックを描画するための機構であり，webページの機能性・視認性が重要視される昨今では，svg要素と並び重要な役割を果たしている．もともとapple社が自社製osの機能向上策として，同
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Canvas Cheat Sheet