逛某东和某宝的时候，进入一个商品页，会在左边看到一张产品图，当鼠标移到产品图上时，会在一旁有一个放大看细节的图层。
在这里我简单的用canvas模拟一下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>查看放大图片</title> </head> <body> <canvas id="canvas" width="350" height="449"></canvas> <canvas id="zoom" width="200" height="200"></canvas> <script> var img = new Image(); img.src = './model.jpg'; img.onload = function() { draw(this); }; function draw(img) { var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), zoomctx = document.getElementById('zoom').getContext('2d'); ctx.drawImage(img, 0, 0); img.style.display = 'none'; var zoom = function() { var x = event.layerX, y = event.layerY; x = (x-30) < 0 ? 0 : (x+30) > 350 ? 290 : Math.abs(x-30); y = (y-30) < 0 ? 0 : (y+30) > 449 ? 389 : Math.abs(y-30); zoomctx.drawImage(canvas,x,y,60,60,0,0,200,200); }; canvas.addEventListener('mousemove',zoom); } </script> </body> </html>
当然，某宝和某东并不只是单纯这么做的。挖一下某宝的实现方法，你会发现：
某宝在页面上隐藏了大视图区和产品对应的大图：
当鼠标在小图上移动时，会用脚本控制大图的绝对定位
这样会给人一种图片被放大了看的错觉，而且放大后的图片还是高清的！
而canvas则不一样，canvas的图片经过放大后，所显示的仍然是那么多的像素。同样多的像素在不同大小的canvas中，会呈现不一样的效果，这个大家可以自己去体验一下。