canvasのサイズをwindowサイズに合わせて画面いっぱいに表示させたい。 そんなとき、canvasのサイズ指定をjQueryの.css()を使ってやろうとするとうまくいきません。 具体的に書くと、 HTML:
![HTML canvasを画面いっぱいに表示したい - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/1a28011c521189d0beb28bba70506924fd1c27bd/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9SFRNTCUyMGNhbnZhcyVFMyU4MiU5MiVFNyU5NCVCQiVFOSU5RCVBMiVFMyU4MSU4NCVFMyU4MSVBMyVFMyU4MSVCMSVFMyU4MSU4NCVFMyU4MSVBQiVFOCVBMSVBOCVFNyVBNCVCQSVFMyU4MSU5NyVFMyU4MSU5RiVFMyU4MSU4NCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NTk3MTVjMDIzZGQ2YjQ2NjI5ODhhOTg5MDgxZTI5MDY%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZ29uc2hpX2NvbSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MGVmNDcxMWMwMTM5OGJlM2NmYzA3NzM5YjUzYjI1NjE%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D9874f5c41f230bdfeec290c89de8d840)
Wii U専用ソフト『スーパーマリオメーカー』の「スーパーマリオ“カベガミ”メーカー」ページです。1. カベガミを作成後、「ダウンロードする」ボタンをクリック。 2. 新規タブに表示されたカベガミを右クリックし、「名前を付けて画像を保存」を選択し、任意の場所にファイルを保存してください。 3. 保存したカベガミを右クリックし、表示されたメニューの中から「デスクトップの背景として設定」を選択。カベガミに設定されます。 ※ 現在のカベガミに戻せなくなる場合があります。 1. カベガミを作成後、「ダウンロードする」ボタンをクリック。 2. 新規タブに表示されたカベガミを右クリックし、「イメージを別名で保存」を選択し、任意の場所にファイルを保存してください。 3. 保存したカベガミを右クリックし、表示されたメニューの中から「デスクトップピクチャを設定」を選択。カベガミに設定されます。
swfのバイナリをJavaScriptで読み込んでバイナリ分解してcanvasに出力したい。 完成品 ienaga/swf2js SWF仕様書 SWFの仕様書が公開されているので仕様書を見ながら分解する。 SWF File Format Specification SWF Investigator 分解された状態を確認できる。便利。 Adobe SWF Investigator swfを読み込む var xmlHttpRequest = new XMLHttpRequest(); xmlHttpRequest.open('GET', url); // XMLHttpRequest2が使えるなら使う isXHR2 = typeof xmlHttpRequest.responseType != 'undefined'; if (isXHR2) { xmlHttpRequest.response
HTML5 Canvasのフレームワーク「CreateJS」(基本的な使い方は入門サイトをご覧ください)について、2015年2月10日に開催されたCreateJS勉強会 (第5回) でライトニングトーク「CreateJSとNode.jsを使ってサーバーでCanvas要素を使おう」を発表しました。今回はそのスライドを元に、サーバーサイドでCreateJSを使うメリットを紹介します。 デモ 今回紹介するnode-easelを使ったデモです。スマホ画面にTwitterのアイコンが、PC画面には白い矩形が表示されています。スマホで選んだTwitterのユーザーのアイコンがPC側でアニメーションします。画像加工はサーバーサイドで動くCreateJSを使って行われています。 Section1. Node.jsとモジュールについて Node.jsはブラウザではなくサーバーサイドで動くJavaScript
Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。 最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています。 GIFやH.264に足りないもの こうした動画表現を実現する技術には複数の選択肢がありますが、モバイルとWebサイトの両方での対応を考えると、GIFアニメーションかH.264のいずれかを選択するのが一般的でしょう。しかしGIFアニメーションは色数が256色と限られ圧縮率も低いため、小さなサイズで数秒程度といった最小限の動画再生にしか向きませんし、音声との同期も困難です。一方、H.264は高精細
iTunesのアルバム情報を表示する時のカラーリング、オシャレだよね! 今回はこんな感じのカラーリングを画像から抽出する処理を、jsで実装します。 こういった面白そうな課題にはすでに先駆者様達がたくさんいるので、それを参考にしながら実装しようかと思います。 実装はいろいろありますが、今回参考にしたのはコレ! user interface - How does the algorithm to color the song list in iTunes 11 work? - Stack Overflow Mathematicaというやつで書かれてますが、手順をかなり詳細に記述してくれているので、js等でも問題なく実装できそうです。 ざっくり手順 ざっくりとした手順はこんな感じ。 ドミナントカラーの求め方とか、詳細は実装と一緒に記載します。 画像から色をRGBとして読み取る 読み取った色を、画
Online Voxel Builder ピクセルアートをゼロから作成できるジェネレーター。 Obelisk.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <head> ... <script src="//path/to/obelisk.min.js"></script> </head> Step 2: HTML オブジェクトを配置するcanvas要素を用意します。 <canvas id="canvas-demo" width="1500" height="400"></canvas> Step 3: JavaScript 例えば、キューブだと下記のようなコードになります。 // get DOM or jQuery element // like: $('#canvas-demo') var canvas = document.getEleme
About Control | «前日 – 1時間前 – 1時間後 – 翌日» – 最新 – 現在地 Overlay | None – Temp – Hum – WV – IN – NO – NO2 – NOX OX – SO2 – CO – CH4 – NMHC – SPM – PM2.5 Air Data | 東京都環境局環境改善部大気保全課 Map Data | 国土数値情報(行政区域データ)国土交通省 Author | Cameron Beccario @cambecc, Facebook, はてな Source | github.com/cambecc/air Modules | node.js, D3.js, when.js Inspiration | HINT.FM wind map 免責事項 | 正確な情報を提供するためのものではありません
かっこいいデザインのローディング用アニメーションのCanvas版、アニメーションGIF版、CSSスプライトPNG版を同時に作成できるオンラインサービスを紹介します。 Sonic Creatorの前に、まずはSonicのデモから。 Sonic Sonicは、HTML5 Canvasを使ってローディング用のアニメーションを作成する超軽量(約3K)のスクリプトで、実装方法などは下記をご覧ください。 かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic 今回紹介するのは、このSonicをコードベースでオンラインで簡単に設計でき、それをアニメーションGIFやCSSスプライト用のPNG画像を生成するオンラインツールです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く