Canvas勉強会7. コンテキスト canvas.getContext( 2d ) <canvas id="c" width="600" height="400"></canvas> <script> var cvs = $('#c').get(0); var ctx = cvs.getContext('2d'); // do something </script>
canvas要素の基本的な使い方まとめ
Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています．えーと，そりゃもうゴリゴリと． 本文書はsvg要素の基本的な使い方まとめの姉妹版として作成を開始した．canvas要素の仕様は現在進行中で色々と変化しているため，一筋縄で行かないが大方のapiについて書き上がったので公開する．なお，まだ使えない機能等満載だったり，内容に間違いがあっても中々検証することができないので，その部分を了承した上でご利用下さい… 更新履歴 2012/07/18 初版 1・canvas要素の概観 canvas要素とは canvas要素はhtml5で採用されたwebブラウザ上でグラフィックを描画するための機構であり，webページの機能性・視認性が重要視される昨今では，svg要素と並び重要な役割を果たしている．もともとapple社が自社製osの機能向上策として，同
wgld.org | WebGL |
WebGL contents WebGL に関するコンテンツの一覧です。 初心者や WebGL の入門者の方は、最初から読み進めていただけると理解が深まると思います。 また、当サイトでは実際に動作する WebGL のサンプルや、WebGL のデモを多数用意していますが、それらには当サイトオリジナルの行列・クォータニオンなどを扱うライブラリ、minMatrix.js などが使われています。ライブラリの詳しい実装については library のページをご覧ください。 WebGL 2.0 については別のコンテンツとして分けて掲載していますので、 WebGL2 のほうを参照してください。 ブラウザの準備 WebGL を始める前に canvas を知る 3D 描画の基礎知識 レンダリングのための下準備 行列(マトリックス)の基礎知識 頂点とポリゴン コンテキストの初期化 シェーダの記述と基礎 頂点バッ
EaselJS学習 - W2U開発wiki
W2U開発wiki トップページページ一覧メンバー編集 EaselJS学習 最終更新： w2u_dev 2011年05月16日(月) 17:44:30履歴 英語できません。機械翻訳と実践でなんとか解読します・・・ 公式サイト→http://easeljs.com/ API一覧→http://easeljs.com/docs/ ※protected、privateなフィールドは無視します。 クラス一覧 クラス階層 DisplayObject Container Stage Shape Text Bitmap BitmapSequence? Ticker Graphics Command Matrix2D MouseEvent Point Rectangle Shadow SpriteSheet? SpriteSheetUtils? UID クラス概要 スーパークラス DisplayObjec
tmlib.js 入門
概要 tmlib.js は phi氏開発のゲーム向け JavaScript ライブラリ class 定義、jQueryライクなDOM操作、ajax機能、HTML5 Canvasラップ、アニメーション、 ベクター・行列、サウンド、PC・スマホ対応 などなど MIT License Google Chrome、Safari、Firefox 対応。IE なんて知りません. 多くのクールなサンプルが公開されている スライド ドキュメント tmlib.js > ダウンロード tmlib.js を使って、SBP（スライディング ブロック パズル）を作ってみたよ SBP とはブロックをスライドさせて目的の配置にするパズルの総称 スライディングブロックパズル 15パズル、 箱入り娘、 ラッシュアワー などが有名 tmlib.js のすべての機能を使ってみたわけじゃないけど、使ってみた部分について解説するよ
HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか？ 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA（シングルページアプリケーション）など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。
UXの効果が数字でわかる！5つのUX KPI : DeNA Creator(クリエイター) Blog
プログラミング教育や社員の健康をサポートする「CHO室」の取り組みなど、DeNAのCSRに関する情報を発信するブログ
[CreateJS] Canvasアニメーションを実装する時に便利で良く利用しているJSライブラリ、CreateJS - YoheiM .NET
Tooklit for CreateJSは仕事でも利用しています。しかし、完全に出力する為にはFlashの××の機能は使っちゃダメなど、 いまのところは制約が多く使いづらいのが現状です。 また、出力されたソースコードをそのまま動かすと、なかなかの重さで書き換える必要がある場合も多く。。 現在は、Flashで利用している画像素材などの書き出し用として使うことがメインです。 CreateJSを使って実際に作ってみる CreateJSのEaselJSとTweenJSとPreloadJSを使って、 以下のような「動物が上下に動く」アニメーションを作成してみたいと思います。 CreateJSを使う為の準備 まずは、CreateJSのライブラリを読み込む実装を行います。 今回はCDNで提供されているものを利用していますが、ローカルにダウンロードしてきてそれを読み込むのももちろんありです。 <scrip
![[CreateJS] Canvasアニメーションを実装する時に便利で良く利用しているJSライブラリ、CreateJS - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/383ba9cac4755b0264d3fc76115f5fbaf427c264/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F174.jpg)
Canvas - HTML5.JP
このコーナーでは、JavaScriptから図を描くことができるCanvasについて解説します。 Canvasとは Canvasとは何か、そしてCanvasで何ができるのかを事例を踏まえて分かりやすく解説します。 Canvasの使い方 実際に、Canvasをどうやって使いこなすのかを、サンプルを通して解説していきます。 いろいろな図形を描く Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。このコーナーではCanvasで利用できる図形描画のいくつかをご紹介します。 色を指定する このコーナーでは、Canvasで描く図形に色を指定する方法を紹介します。またCanvasでは指定した色に透明度を与えることも可能ですので、その方法についても紹介していきます。 線形グラデーションを指定する このコーナーでは、Canvasで描いた図形にグラデーションを指定する方法
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
実録！HTML5でモバイルWebアプリ開発