canvas实现放大镜与放大缩小

最近在谈论下一个项目OA系统的时候，需要用到canvas，那么就简单实现了一些canvas的demo效果

canvas实现放大缩小canvas实现放大镜

第一步先布局

<div id="add">放大</div>
<div id="release">缩小</div>
<canvas id="canvas"      style="display: block; margin: 0 auto; border: 1px solid #aaa"    >
</canvas>

第二步进行初始化数据并将图片填充到canvas

let add = document.getElementById("add"); 

let release = document.getElementById("release");     
let canvas = document.getElementById("canvas");      
let context = canvas.getContext("2d");      
let initScale = 1; //缩放倍数 1为默认值   
let image = new Image();     
var isMouseDown = false; //是否处于拖动状态    
window.onload = () => {      
  _initCanvasImg();    
  image.onload = () => {
  dramImageByScale(1);
};
};
//页面加载成功初始化  
function _initCanvasImg() {
        image.src = "1.jpg"; 
}// 绘制图像
function dramImageByScale(scale) {
        let imgWidth = image.width;
        let imgHeight = image.height;
        canvas.width = imgWidth;
        canvas.height = imgHeight;  
        var width = imgWidth * scale;
        var height = imgHeight * scale;
        var sx = canvas.width / 2 - width / 2; //x坐标
        var sy = canvas.height / 2 - height / 2; //y坐标 
       context.clearRect(0, 0, canvas.width, canvas.height);
        //drawImage 方法在画布上绘制图像、画布或视频。
        //绘制的内容、坐标 被剪切的宽高 
       context.drawImage(image, sx, sy, width, height);      
}

在这里sx、sy就是图片放大路径

 add.onclick = () => {
        initScale += 0.1;
        console.log(initScale);
        dramImageByScale(initScale);
 };     
release.onclick = () => {
        initScale -= 0.1;
        console.log(initScale);
        dramImageByScale(initScale);
      };

这便是对应放大和缩小事件

canvas实现放大镜

这便是效果图很像京东、淘宝的放大镜商品功能，这个功能我也是利用canvas开发的

   <style> 
       #copycanvas {
            border: 1px solid #000;
           display: none;
        }                
        #square {
            width: 90px;
            height: 90px;
            background-color: #cc3;
            border: 1px solid #f00; 
           opacity: 0.5;
            position: absolute;
            z-index: 999;
            display: none;
            cursor: crosshair;
        }
    </style>

<canvas id="canvas" width="500" height="300"></canvas>
    <canvas id="copycanvas" width="300" height="300"></canvas>
    <div id="square"></div>

这便是基本的html、css

然后呢我们要进行初始化操作

 var canvas = document.getElementById('canvas'),
            context = canvas.getContext('2d'),
            copycanvas = document.getElementById('copycanvas'),
            copycontext = copycanvas.getContext('2d'),
            square = document.getElementById('square'),
            squaredata = {},
            box = canvas.getBoundingClientRect();
        function initImage() {
            let image = new Image(); 
           image.src = "./1.jpg";
            image.onload = function() {
                context.drawImage(image, 0, 0, canvas.width, canvas.height);            }        }        initImage()

现在当用户用鼠标指针移动时候触发并设置条件与边界

window.onmousemove = function(e) {
            let {clientX: x, clientY: y  } = e//鼠标坐标在canvas里
            if (x >= canvas.offsetLeft && x <= canvas.offsetLeft + canvas.width && y >= canvas.offsetTop && y <= canvas.offsetTop + canvas.height) {
                createSquare(x, y);            
            } else { 
               hideSquare(); 
               hideCanvas();            
            }

最后展示下copy函数的内容 也就是右边放大镜

 function copy() {
            copycontext.drawImage(
                canvas,
                squaredata.left,
                squaredata.top,
                90,
                90,
                0, 0, copycanvas.width, copycanvas.height
            );
        }

其余函数就是显示隐藏

//显示右边的canvas        function showCanvas() {            copycanvas.style.display = "inline";        }        //显示鼠标图案指针        function showSquare() {            square.style.display = 'block';        }
 function hideCanvas() {            copycanvas.style.display = "none";        }        function hideSquare() {            square.style.display = 'none';        }

//设置鼠标指针图案位置并设置右边的canvas        function moveSquare(x, y) {            square.style.left = `${x}px`            square.style.top = `${y}px`            showCanvas();            showSquare();            copy();        }

是不是感觉很简单！是的没错简单最主要是运用基本DOM的API和canvasAPI，所以熟悉api后+思路就会做出一些简单东西出来，canvas不仅仅这些可视化的很多炫酷东西都能做，加油！