HTML5 Canvasで画像の一部をルーペ風に拡大表示

ECサイトなどで見かける画像の一部をルーペで見たように拡大する機能ですが、従来はJS+CSSで実装される事が多かったのでないでしょうか。 上記機能をCanvasで実現できると考え、早速作成しました。 デモ 下記画像のAとBのタイルは物理的には同じ色ですが、チェックや円柱からなる影の影響でBが薄く見える有名な錯視画像です。 拡大時はわかりやすいようにAとBをラインでつなげていますので、拡大してご覧ください。 対応ブラウザ IE9+ Chrome（最新版を推奨） Firefox（最新版を推奨） Safari（最新版を推奨） 仕組み マウス移動と連動して表示範囲を算出し、拡大表示領域に表示する。という基本的な仕組みは共通ですが拡大表示部分の実現方法が異なります。 Canvas版 マウス位置に応じて拡大表示範囲を算出 canvas要素へdrawImage()で画像を描画 具体的なコードは上記デモの

[jaa03012]

ルーペjs