canvas图片滚轮放大缩小

html

    你的浏览器不支持canvas

js

 	let canvas = document.querySelectorAll('#canvas')[0]
    let context = canvas.getContext('2d')
    let img = new Image()
    let stemp = 10 // 步进
     // 计算尺寸的函数
    let roll = function (e) {
        e = e || window.event;
        if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
            if (e.wheelDelta > 0) { //当滑轮向上滚动时
                stemp--
                return e.wheelDelta / 120 + stemp
            }
            if (e.wheelDelta < 0) { //当滑轮向下滚动时
                stemp++
                return e.wheelDelta / 120 + stemp
            }
        } else if (e.detail) {  //Firefox滑轮事件
            if (e.detail> 0) { //当滑轮向上滚动时
                stemp--
                return e.wheelDelta / 120 + stemp
            }
            if (e.detail< 0) { //当滑轮向下滚动时
                stemp++
                return e.wheelDelta / 120 + stemp
            }
        }
    };
    //给页面绑定滑轮滚动事件
    if (document.addEventListener) {
        document.addEventListener('DOMMouseScroll', roll, false)
    }
    canvas.onmousewheel = canvas.onmousewheel = roll // 给canvas绑定滑轮滚动事件

    //滚动滑轮触发scrollFunc方法
    window.onload = function () {
        canvas.width = 1024
        canvas.height = 576
        img.src = './445991_145804524184_2.jpg'
        img.onload = function () {
            drawImageScale()
            canvas.onmousewheel = canvas.onmousewheel = function () {
                let resize = roll()
                drawImageScale(resize)
            }
        }
    }
    // 控制写入图片大小的函数
    function drawImageScale (resize) {
        if (!resize) {
            resize = 10
        }
        let imgWidth = 1024 + resize
        let imgHeight = 576 + resize
        // let sx = imgWidth / 2 - canvas.width / 2
        // let sy = imgHeight / 2 - canvas.height / 2
        let dx =  canvas.width / 2 - imgWidth / 2
        let dy = canvas.height / 2 - imgHeight / 2
        context.drawImage(img, dx, dy, imgWidth, imgHeight, 0, 0, canvas.width, canvas.height)
    }