canvas学习：简单模拟商城放大产品图片

逛某东和某宝的时候，进入一个商品页，会在左边看到一张产品图，当鼠标移到产品图上时，会在一旁有一个放大看细节的图层。

在这里我简单的用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中，会呈现不一样的效果，这个大家可以自己去体验一下。

 

posted @ 2017-07-13 16:50  小懒惰的猪  阅读(354)  评论(0)  编辑  收藏  举报