大众计算机学习网欢迎诸位!收藏本站注 册登 陆
常用教程:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 教程 > 文章页

canvas实现放大镜效果

Admin | 2017-2-25 9:00:53 | ReadNums | 353 | 标签 网页制作 | 打印本页
     

  一、网页控件

  <canvas id="canvas" width="500" height="500">
</canvas>

  <img src="image.png" style="display: none" id="img">

  二、CSS代码

  #canvas {
            display: block;
            border: 1px solid red;
            margin: 0 auto;
            cursor: crosshair;
  }

  三、功能代码

  var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var img = document.getElementById("img");

  // 图片被放大区域的中心点,也是放大镜的中心点
    var centerPoint = {};
    // 图片被放大区域的半径
    var originalRadius = 100;
    // 图片被放大区域
    var originalRectangle = {};
    // 放大倍数
    var scale = 2;
    // 放大后区域
    var scaleGlassRectangle

    centerPoint.x = 200;
    centerPoint.y = 200;

    window.onload = function () {
        addListener();
        draw();
    }

    function drawBackGround() {
        context.drawImage(img, 0, 0);
    }

    function calOriginalRectangle(point) {
        originalRectangle.x = point.x - originalRadius;
        originalRectangle.y = point.y - originalRadius;
        originalRectangle.width = originalRadius * 2;
        originalRectangle.height = originalRadius * 2;
    }

    function drawMagnifyingGlass() {

        scaleGlassRectangle = {
            x: centerPoint.x - originalRectangle.width * scale / 2,
            y: centerPoint.y - originalRectangle.height * scale / 2,
            width: originalRectangle.width * scale,
            height: originalRectangle.height * scale

        }
        context.save();
        context.beginPath();
        context.arc(centerPoint.x, centerPoint.y, originalRadius, 0, Math.PI * 2, false);
        context.clip();

        context.drawImage(canvas,
                originalRectangle.x, originalRectangle.y,
                originalRectangle.width, originalRectangle.height,
                scaleGlassRectangle.x, scaleGlassRectangle.y,
                scaleGlassRectangle.width, scaleGlassRectangle.height
        )
        context.restore();

        context.beginPath();
        var gradient = context.createRadialGradient(
                centerPoint.x, centerPoint.y, originalRadius - 5,
                centerPoint.x, centerPoint.y, originalRadius);
        gradient.addColorStop(0, 'rgba(0,0,0,0.2)');
        gradient.addColorStop(0.80, 'silver');
        gradient.addColorStop(0.90, 'silver');
        gradient.addColorStop(1.0, 'rgba(150,150,150,0.9)');

        context.strokeStyle = gradient;
        context.lineWidth = 5;
        context.arc(centerPoint.x, centerPoint.y, originalRadius, 0, Math.PI * 2, false);
        context.stroke();
    }


    function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawBackGround();
        calOriginalRectangle(centerPoint);
        drawMagnifyingGlass();
    }


    function addListener() {
        canvas.onmousemove = function (e) {
            centerPoint = windowToCanvas(e.clientX, e.clientY);
            draw();
        }
    }

    function windowToCanvas(x, y) {
        var bbox = canvas.getBoundingClientRect();
        var bbox = canvas.getBoundingClientRect();
        return {x: x - bbox.left, y: y - bbox.top}
    }

  四、效果图



问题未解决:在线咨询我要在线咨询问题

网友评论

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日