canvas实现图片放大镜效果-html代码-BFW代码库

canvas实现图片放大镜效果

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
        width: 100vw;
        height: 100vh;
        background: #fff;
        margin: 0;
        padding: 0;
        position: relative;
        overflow: hidden;
}

canvas {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        border: 7px solid rgba(255, 255, 255, .1);
  box-shadow: 0px 0px 10px #00000038;
        cursor: pointer;
        box-sizing: border-box;
}

.info {
        position: absolute;
        bottom: 1rem;
        left: 0;
        font-family: monospace;
        width: 100%;
        text-align: center;
        font-size: 1rem;
}
</style>

</head>
<body translate="no">

<script>
class Experience {
  constructor(container) {
    this.canvas = document.createElement("canvas");
    container.appendChild(this.canvas);
    this.context = this.canvas.getContext("2d");

    const fps = 60; //60
    this.fpsInterval = 1000 / fps;
    this.then = Date.now();

    this.point = { x: 0, y: 0 };
    this.distPoint = { x: 0, y: 0 };
    this.pos = { x: 0, y: 0 };

    this.resize();
    this.bind();

    this.image = new Image();
    this.image.src = "http://repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png";

    this.image.onload = () => {
      this.loop();
    };
  }

  bind() {
    window.addEventListener("resize", this.resize.bind(this), false);

    this.canvas.addEventListener("mousemove", this.onMouseMove.bind(this));

    this.canvas.addEventListener("touchmove", this.onTouchMove.bind(this));

  }

  render() {
    this.clear();
    // this.context.save()
    this.context.drawImage(this.image, 0, 0, this.canvas.width, this.canvas.height);

    this.pos.x += (this.point.x - this.pos.x) * 0.2;
    this.pos.y += (this.point.y - this.pos.y) * 0.2;

    this.context.save();
    this.context.beginPath();
    this.context.arc(this.pos.x, this.pos.y, this.canvas.height * 0.15, 0, Math.PI * 2, true);
    this.context.strokeStyle = &q.........完整代码请登录后点击上方下载按钮下载查看