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

        var iWidth = img.width;<br/>
        var iHeight = img.height;<br/>
        var width = iWidth * scale;<br/>
        var height = iHeight * scale;

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

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

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

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

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

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

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

</script>

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