用H5切图进行放大效果展示

HTML:

    <img id="myimg" src="../img/005.jpg" style="width: 1000;height: 500;" alt="图片没了！">
    <canvas width="1400" height="600" id="can" style="border: 1px solid rgb(0, 0, 0);"></canvas>

JS:

   var can = document.getElementById("can"); //获得图片对象
    if (can.getContext) { //判断是否返回一个用于在画布上绘图的环境
        var ctx = can.getContext("2d"); //创建绘画对象(js画笔)
        var myimg = document.getElementById("myimg"); //获得这个图片的对象
        myimg.onload = function() { //封装这个函数
            myimg.onmousemove = function(e) { //当鼠标移动到图片上的时候
                var x = e.offsetX - 50; //X方向进行减50的操作
                var y = e.offsetY - 50; //Y方向进行减50的操作
                ctx.clearRect(0, 0, 400, 400); //清除原有的渲染图片
                ctx.drawImage(myimg, x - 50, y - 50, 200, 200, 0, 0, 400, 400); //将图片上有的部分进行截取(可以去掉-50的选项)
            }
        }
    }

效果展示：