js 实现缩放
使用 CSS transform 实现缩放
通过 CSS 的 transform: scale() 属性可以轻松实现元素的缩放效果。JavaScript 用于动态控制缩放比例。
const element = document.getElementById('target');
element.style.transform = 'scale(1.5)'; // 放大到1.5倍监听滚轮事件实现交互缩放
结合 wheel 事件可以实现滚动缩放效果，需要注意阻止默认事件避免页面滚动。
const target = document.querySelector('.zoomable');
let scale = 1;
target.addEventListener('wheel', (e) => {
e.preventDefault();
scale += e.deltaY * -0.01;
scale = Math.min(Math.max(0.5, scale), 3);
target.style.transform = `scale(${scale})`;
});使用动画库实现平滑缩放
GSAP 等动画库可以提供更流畅的缩放动画效果：
gsap.to(".box", {
duration: 1,
scale: 2,
ease: "power2.out"
});Canvas 中的图像缩放
在 Canvas 中绘制图像时，可通过调整绘制尺寸实现缩放：
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
// 原始尺寸绘制
ctx.drawImage(img, 0, 0);
// 缩放绘制（宽高放大2倍）
ctx.drawImage(img, 0, 0, img.width*2, img.height*2);
};
img.src = 'image.jpg';SVG 元素的缩放
SVG 元素可以通过设置 transform 属性或修改 viewBox 实现缩放：
const svg = document.querySelector('svg');
svg.setAttribute('transform', 'scale(1.2)');响应式缩放实现
结合窗口大小变化实现自适应缩放：
function handleResize() {
const container = document.getElementById('container');
const scale = Math.min(
window.innerWidth / 1920,
window.innerHeight / 1080
);
container.style.transform = `scale(${scale})`;
}
window.addEventListener('resize', handleResize);
handleResize();缩放的性能优化
对于频繁变化的缩放操作，使用 will-change 属性提升性能：
element.style.willChange = 'transform';
requestAnimationFrame(() => {
element.style.transform = `scale(${newScale})`;
});
