HTML5 Canvas图像放大、移动实例1

1.前台代码

<canvas id="canvasOne" class="myCanvas" width="500" height="500"></canvas>
<script>
    /***************绘制图像，放大缩小实例******************/
    var canvas = document.getElementById('canvasOne');
    var ctx = canvas.getContext('2d');
    //加载图片
    var scale = 0.1;//缩放比例
    var img = new Image();
    img.onload = function () {
        reShow();
    }
    img.src = '../images/1.jpg';
    //根据缩放比例，显示图片
    function reShow() {
        var cWidth = canvas.width;
        var cHeight = canvas.height;

        var iWidth = img.width;
        var iHeight = img.height;
        var width = iWidth * scale;
        var height = iHeight * scale;

        //居中显示
        var left = (cWidth - width) / 2;
        var top = (cHeight - height) / 2;

        //清空画布极限值 --失败
        //var maxWidth = iWidth > width ? iWidth : width;
        //var maxHeight = iHeight > height ? iHeight : height;
        //var minLeft = left < 0 ? left : 0;
        //var minTop = top < 0 ? top : 0;
        //ctx.clearRect(0,0,cWidth,cHeight);

        //清除画布方式2 --失败
        //var number = 1 / scale;
        //var cWidth = canvas.width * number;
        //var cHeight = canvas.height * number;
        //ctx.clearRect(-cWidth, -cHeight, cWidth * 2, cHeight * 2);

        //清除画布3
        ctx.clearRect(-spanLeft, -spanTop, canvas.width, canvas.height);
        ctx.drawImage(img, left, top, width, height);
    }
    //滚轮时间
    addMouseWheel(canvas, function (e) {
        var temp = e.delta > 0 ? 0.1 : -0.1;
        scale += temp;
        //缩放极限判断
        scale = scale < 0.1 ? 0.1 : scale;
        scale = scale > 1 ? 1 : scale;
        reShow();
    });

    //鼠标移动事件
    //1.有一个鼠标移动，重绘图片的bug
    var oldX = oldY = 0;
    var isMove = false;
    var spanLeft = spanTop = 0;
    canvas.onmousedown = function (e) {
        oldX = e.clientX;
        oldY = e.clientY;
        isMove = true;
    }
    canvas.onmousemove = function (e) {
        if (isMove) {
            var currentX = e.clientX;
            var currentY = e.clientY;

            //计算移动的距离
            var spanX = currentX - oldX;
            var spanY = currentY - oldY;
            spanLeft += spanX;
            spanTop += spanY;
            ctx.translate(spanX, spanY);
            reShow();

            //记录当前结果
            oldX = currentX;
            oldY = currentY;
        }
    }
    canvas.onmouseup = function (e) {
        oldX = oldY = 0;
        isMove = false;
    }
    canvas.onmouseleave = function (e) {
        oldX = oldY = 0;
        isMove = false;
    }

</script>

2.绑定鼠标滚轮事件

//绑定dom  元素的mousewheel 事件
//并设置 对应滚动的是 e.detlta  >0 向上滚动  <0  向下滚动
(function (window) {
    window.addMouseWheel = function (dom, hander) {
        if (document.mozHidden !== undefined) {
            //FF
            dom.addEventListener('DOMMouseScroll', function (e) {
                e.delta = -(e.detail || 0) / 3
                hander(e);
            })
        } else {
            if (window.addEventListener) {
                //IE,google 等
                dom.addEventListener('mousewheel', function (e) {
                    e.delta = e.wheelDelta / 120;
                    hander(e);
                });
            } else if (window.attachEvent) {
                // IE 低版本
                dom.attachEvent('onmousewheel', function (e) {
                    e.delta = e.wheelDelta / 120;
                    hander(e);
                });
            }
        }
    }
})(window);

显示结果：