The Portfolio of Hakim El Hattab
I'm Hakim El Hattab, a Swedish front-end developer and interface designer. I co-founded and am working on Slides. +++ Slides is a platform for creating, presenting and sharing slide decks. Sign up for free or check out this demo presentation. ResumeFilter.AI Upload a job description + resumes and ResumeFilter will tell you who's the best fit. Plus, get an individual report including strengths, wea
33 Best HTML5 and CSS3 3D Demo Examples - freshDesignweb
In this article you will see that there are some amazing HTML5 and CSS3 3D graphics examples with demo link. Usually, HTML5 goes hand in hand with CSS3 to create the professional web experiences. In fact, websites develop in HTML5 animation will not require adobe flash support on your Web browser anymore, provided that your browser supports HTML5. Many people believe that HTML5 new advance technol
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう
wgld.org | WebGL |
WebGL contents WebGL に関するコンテンツの一覧です。 初心者や WebGL の入門者の方は、最初から読み進めていただけると理解が深まると思います。 また、当サイトでは実際に動作する WebGL のサンプルや、WebGL のデモを多数用意していますが、それらには当サイトオリジナルの行列・クォータニオンなどを扱うライブラリ、minMatrix.js などが使われています。ライブラリの詳しい実装については library のページをご覧ください。 WebGL 2.0 については別のコンテンツとして分けて掲載していますので、 WebGL2 のほうを参照してください。 ブラウザの準備 WebGL を始める前に canvas を知る 3D 描画の基礎知識 レンダリングのための下準備 行列(マトリックス)の基礎知識 頂点とポリゴン コンテキストの初期化 シェーダの記述と基礎 頂点バッ
重ねた画像の表示の仕方を指定する(globalCompositeOperation) [html5 の Canvas を使ってみる：第卌一回]
globalCompositeOperation では、この記述前に描画した矩形の上に、記述後に描画した矩形を載せた際に発生する重なり具合についてあれこれと指定できるみたいだ。 ★html 側 onload = function() { // 画面ロード時に描画を実行 draw(); }; function draw() { // id: globalCompositeOperation で 2 次元描画を行うことの定義 var c = document.getElementById("globalCompositeOperation").getContext('2d'); // fillStyle で緑の塗りを指定 c.fillStyle = "rgb(0, 255, 0)"; // fillRect で塗りつぶした矩形を描画 c.fillRect(40, 0, 20, 150); //
globalCompositeOperation プロパティ - Canvasリファレンス - HTML5.JP
構文 context . globalCompositeOperation [ = value ] 現在の合成処理を返します。後述のリストの通りです。 値をセットして、合成処理を変更することができます。未知の値は無視されます。 仕様 globalCompositeOperation 属性は、どのように図形や画像を現存するビットマップ上に描画するのかをセットします。それらは、globalAlpha が与えられると、現在の変換マトリックスが適用されます。この属性値には下記リストの値をセットしなければいけません。下記では、描画元イメージ A はこれからレンダリングしようとしている図形や画像を表し、描画先イメージ B は現在のビットマップ状態を表します。 source-atop A atop B。描画元イメージのうち、両方のイメージが不透明な部分が表示されます。描画先イメージのうち、描画先イメージ
toDataURL() メソッド - Canvasリファレンス - HTML5.JP
構文 url = canvas . toDataURL( [ type, ... ]) canvas のイメージに対する data: URL を返します。 第 1 引数を指定すると、それは、返されるイメージのタイプ (例えば、PNG や JPEG) を制御します。デフォルトは image/png です。このタイプは、指定のタイプがサポートされていない場合も適用されます。残りの引数はタイプ固有のものとなり、下表の通り、イメージが生成される方法を制御することになります。 仕様 toDataURL() メソッドは、引数がない場合は、PNG ファイルとしての画像表現を含んだ data: URI を返さなければいけません。[PNG] canvas にピクセルがなければ（つまり、幅も高さも 0 なら）、このメソッドは文字列 "data:," を返さなければいけません。（これは、最短の data: UR
はてなブログ | 無料ブログを作成しよう
わたし的棚ぼた一万円選書 急に千葉さんに手渡された封筒、開けてみたら1万円札が1枚。何ごとかと思えば、同期の出張を代わったお礼をもらったらしい。 「葵はワンオペで育児してくれたから」と半分わけてくれました。 泡銭の1万円 これはもう、わたし的1万円選書をしろという思し召しなのでは……
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
実際のサンプル - getImageData / putImageData メソッド - Canvasリファレンス - HTML5.JP