一个普通的放大镜
<script src="https://magnifier.oulaoula.cn/dist/magnifier.js"></script>
module
npm
npm install magnifier --save
// 新版扩散
drawMagnifier(magCtx, bgCtx, bounds);
// 系统缩放
drawSystemMagnifier(magCtx, canvasSize, canvasImg, bounds);
-
magCtx
CanvasRenderingContext2D - 放大镜所在画布 -
bgCtx
CanvasRenderingContext2D - 背景所在画布 -
bounds
IBounds - 放大区域
-
magCtx
CanvasRenderingContext2D - 放大镜所在画布 -
size
ISize - 背景尺寸 -
image
Image - 背景图 -
bounds
IBounds - 放大区域
-
width
number -
height
number -
x
number -
y
number
// node
// import { drawImageByUrl, drawSystemMagnifier } from 'magnifier';
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const bgUrl = "https://magnifier.oulaoula.cn/bg.jpeg";
const magnifier = document.createElement("canvas");
magnifier.style.position = "fixed";
magnifier.style.right = "0";
magnifier.style.bottom = "0";
magnifier.width = 190;
magnifier.height = 190;
const magCtx = magnifier.getContext("2d");
document.body.appendChild(magnifier);
let img;
drawImageByUrl(ctx, canvas, bgUrl, (res) => {
img = res;
});
canvas.onmousemove = function (e) {
const { offsetX, offsetY } = e;
window.requestAnimationFrame(function () {
const bounds = {
x: offsetX - 9,
y: offsetY - 9,
width: 19,
height: 19,
};
// 新版扩散
drawSystemMagnifier(magCtx, canvas, img, bounds);
});
};