HTML5 Canvasで画像の一部をルーペ風に拡大表示
ECサイトなどで見かける画像の一部をルーペで見たように拡大する機能ですが、従来はJS+CSSで実装される事が多かったのでないでしょうか。 上記機能をCanvasで実現できると考え、早速作成しました。 デモ 下記画像のAとBのタイルは物理的には同じ色ですが、チェックや円柱からなる影の影響でBが薄く見える有名な錯視画像です。 拡大時はわかりやすいようにAとBをラインでつなげていますので、拡大してご覧ください。 対応ブラウザ IE9+ Chrome（最新版を推奨） Firefox（最新版を推奨） Safari（最新版を推奨） 仕組み マウス移動と連動して表示範囲を算出し、拡大表示領域に表示する。という基本的な仕組みは共通ですが拡大表示部分の実現方法が異なります。 Canvas版 マウス位置に応じて拡大表示範囲を算出 canvas要素へdrawImage()で画像を描画 具体的なコードは上記デモの
MOONGIFT: IEでもcanvasを「ExplorerCanvas」:オープンソースを毎日紹介
次世代のWeb技術として注目を集めているCanvas。ブラウザ画面上で絵を描いたり、2Dや3Dのグラフィックスがダイナミックに描ける技術だ。 しかし一つ問題がある。それは対応ブラウザがFirefoxやOperaに限られることだ。シェアが若干落ちたとは言え、もっとも普及しているIEが対応していないのは問題だ。そこでこれを使ってみよう。 今回紹介するオープンソース・ソフトウェアはExplorerCanvas、IE向けのCanvas実現ソフトウェアだ。 ExplorerCanvasを使うと、ブラウザ上でダイナミックな描画が可能になる。もちろん、クロスブラウザに対応し、Firefoxでも利用できる。 サンプルが同根されているので、一度試してみて欲しい。画像をダイナミックに回転させたり、細かい粒が飛び交うアクションは表現力の豊かになったWebサイトの形を連想させる。 これらをFlashなどを使って実
Canvas tutorial - MDC
このチュートリアルは、 <canvas> 要素を使用して二次元のグラフィックを描画する方法を、基本から説明します。ここでの例は、キャンバスで何ができるかを明確に示すものであり、独自のコンテンツを作成するためのコードスニペットも提供しています。 <canvas> は HTML の要素であり、スクリプト（ふつうは JavaScript）を使ってグラフィックを描くことができます。これは例えば、グラフを描いたり、写真を合成する、または簡単なアニメーションを（あまり簡単ではないものも）作成したりすることができます。このページにある画像は、このチュートリアルで作成する <canvas> の実装の例を示しています。 <canvas> は Apple が macOS Dashboard のために WebKit に初めて導入した後、ブラウザーに実装されました。現在は、あらゆる主要ブラウザーが対応しています。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLタグ ファレンス
