2012/05/14

HTML5 canvas 画像ドラッグ

canvasを使って、画像を表示させて、マウスでドラッグできるようにしてみた。限られたスペースで、画像の細部を確認したいときに有効かと思って。ここのBlogでは、記事の幅は460pxにしている。幅を狭めにしているのはモバイル機器からのアクセスもそれなりにあるから。460pxで作っておけば、多くの場合ストレスなく見れる。また幅が広すぎると文章も読みにくくなるという理由もあったりする。画像の幅も、なるべく揃えるようにしているけど、たまに大きな画像を使いたいときがあって、別ウィンドウで表示させたりしていた。今回のドラッグする方法は用途によって使えそう。
例によってIEでは見れないと思います。