ImageMagick の Canvas / Page について - Qiita
はじめに PNG や GIF 画像で identify を実行すると、よく分からない座標が表示される件です。JPEG では問題になりません。 なお、このエントリは実質 +repage の紹介記事となります。 % identify crop.png crop.png PNG 200x200 640x480+100+100 8-bit sRGB 183c 4344B 0.000u 0:00.000 ImageMagick はこの 640x480 を (Layer) Canvas サイズ、200x200 は (Image) Page サイズと呼びます。 (canvas は書き込み作業途中の image データを表す事もあって多義的なので注意) Canvas / Page のイメージ図 ImageMagick で crop を繰り返すと意図しない動きをしたり、GIF アニメーションの resize
君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA
ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？ webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています
Android開発者のためのFlutter説明文がためになったので全訳&要約 - Qiita
View Viewに相当するものは？ Androidではボタン、ツールバー、inputsなどのすべてがViewです。 Flutterでは、Viewとおおよそ同じものがウィジェットです。 ウィジェットはAndroidのViewに正確に対応しているわけではありませんが、Flutterがどのように機能するかを学んでいる間は、"UIを宣言および構築する方法"と考えることができます。 ただし、これらにはいくつか違いがあります。はじめに寿命が異なります。 ウィジェットは不変であり、変更が必要になるまで存続し続けます。 ウィジェットやそのウィジェットのStateが変更されるたびに、Flutterフレームワークは、新しいウィジェットツリーを作成します。 それに対して、AndroidViewは、一度描画されたら、invalidate()が呼ばれるまで再描画されません。 Flutterのウィジェットは、その不
Vue!!!SVG!!!「もうcanvasは時代遅れなんだね・・・あれ、でもcanvasで作ったほうが早くない？」 ⇛ 1時間でテトリスを作ってみた - Qiita
Vue!!!SVG!!!「もうcanvasは時代遅れなんだね・・・あれ、でもcanvasで作ったほうが早くない？」 ⇛ 1時間でテトリスを作ってみた canvasってもう時代遅れになってしまいましたが、 簡単なものを作る際にはVueやらSVGを使わなくたって、すぐにできちゃうから便利なんです！ という事でさっと簡単にテトリスを作ってみました。 【URL】https://tetris-ryuta69.herokuapp.com/ canvas最強！ と感動してたあの頃の気持ちに戻れてよかったです。 ちなみにcanvasを実務で使ったことはないです（おい） canvasの値を動的にリアルタイムで変えていく。 @pione30 さんの『Vue + Vuex + TypeScript でテトリスを作った話』を見てて、 何も考えずに Canvas 上でゲーム画面を描画するものとしてコードを書き始めて
HTML5/Javascriptの画像処理ライブラリまとめ
HTML5(Canvus)、Javascript向けの画像処理ライブラリについてまとめたので紹介します。 続きを読む
HTML5周辺技術のWebGLとJavaScriptでジニーエフェクト | ClockMaker Blog
JavaScriptでMac定番のジニーエフェクトを作ってみました。今回利用したのはHTML5周辺技術のWebGLというもので、プラウザネイティブでGPUを利用できる機能です。 デモを見る (2023年バージョン) デモを見る (2012年バージョン) ※2023年にデモをThree.js r151で動作するようにメンテナンスしました。 WebGLとCanvasの違い 今回はWebGLを使っているため再生可能な環境が限られています。本当は再生できる環境を増やすためにWebGLではなくCanvasタグを利用したかったのですが、Canvasタグだとアンチエイリアスの限界で「ヒビ割れ」が発生して完成させることができませんでした。 失敗作A (自前で作成したバージョン) 失敗作B (Three.jsのCanvasレンダラーを利用したバージョン) 対策としてトライアングルを外側に広げるなど色々試した
[JS]かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic
HTML5 Canvasを使って、ローディング用のアニメーションを作成する超軽量（約3K）のスクリプトを紹介します。 デモページ Sonicの実装 Square（矩形）とCircle（円形）を例に実装方法を紹介します。 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="sonic.js"></script> JavaScript: Square（矩形） あとは、JavaScriptで記述するだけです。 var square = new Sonic({ width: 100, height: 100, fillColor: '#000', path: [ ['line', 10, 10, 90, 10], ['line', 90, 10, 90, 90], ['line', 90, 90, 10, 90], ['line', 10, 90, 10, 10]
Rails3.1の初期化プロセスを細かく追いかけたRailsGuidesの記事を和訳したよ:ミームの死骸を越えてゆけ
This domain may be for sale!
WWW.AKIRAFUKUOKA.COM BLOG | 今VJするならブラウザででしょ！ HTML5でVJアプリ「Fi-VJ」を制作しました
HTML5ならのVJアプリだって作れるはず！で、作りました Fi-VJ ver1.02 デモページはこちら ファイルダウンロードはこちら (ver1.02) DLしたら@akirafukuokaに声をかけていただけると嬉しいです!! Fi-VJ(ファイブイジェイ)というVJアプリを極々個人的に制作しました。MacのネイティブアプリでもなければiPhone/iPadアプリでもありません。ブラウザで動くHTML5-VJアプリです。確認済み動作環境はMac版Safari 5.0.5だけです。他のブラウザでは確認してません（デモページはSafariとChromeで動くようですが）。というかローカル実行ではSafari以外ではまず動きません。これに関する解説は後ほど。 ここ数年ビデオミキサーにiPhoneやiPodを繋いでプレイしていた私ですが、そろそろPCを使ったVJに戻ろうかと思ったのがちょうど
JavascriptとCanvasによるファミコンエミュレーター
JSNES: A Javascript NES emulator JavascriptとCanvasを使ったNES(ファミコン)エミュレーターを実装したと主張している。Chromeならば、パフォーマンスも申し分ない。 にわかに信じられないが、どうやら本物らしい。 もし本当だとしたら、本物のROMを使用しているようなので、合法ではないのであまり深く追求しないが、ソースをみる限り、本当にエミュレーターを実装しているらしい。サイトの説明によると、vNESというエミュレーターを、JavascriptとCanvasを使うように移植したのだとか。 ところで、もし本物だとして、本当に本物のカートリッジからダンプしたROMを使っているのだとして、一体どうやってJavascriptからバイナリファイルを扱うんだろうと思って調べてみた所、どうやら、バイナリファイルではなく、スラッシュ区切りの十進数文字列にして
Allan Jardine | Reflections | Visual Event
Events in Javascript are often seen as a bit of an enigma. This is odd given that Javascript is very much an event driven language, but it is typically down to their complex nature and difficulty to debug. To this end I've created Visual Event to help track events which are subscribed to DOM nodes. Update: Visual Event 2 is now available and released as open source. Introduction When working with
Katamari Hack
Drag this link to your bookmarks bar: Katamari! Or copy and paste this url into the location bar on any site: javascript:var i,s,ss=['http://kathack.com/js/kh.js','http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'];for(i=0;i!=ss.length;i++){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0); (works best in chrome or firefox 4) What is this? This is
これは見ておくべきHTML5のCanvasを使ったデモ集:phpspot開発日誌
21 Ridiculously Impressive HTML5 Canvas Experiments | Nettuts これは見ておくべきHTML5のCanvasを使った実験集。 ここまで出来るの？っていうサンプルが満載で一度は見ておきたいものばかりです。 8 Bit Color Cycle Particle Letter Animation Particle System Strange Attractors Liquid Particles Fake Floor Reflections 次世代のWEBが楽しみです。 関連エントリ HTML5で動画や音声再生を可能にするライブラリ集 HTML5ベースのTODOリスト「5List」 CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装JS「MediaElement.js」 CSSでスキン作成が可能なHTML5動画プレイヤー実
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSNES: A JavaScript NES emulator
Engadget | Technology News & Reviews