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 = () =&g.........完整代码请登录后点击上方下载按钮下载查看