如何使用 Canvas 实现动态图像模糊效果？
最新回答
╭⌒浅浅笑
2023-07-30 01:58:13
使用Canvas实现动态图像模糊效果的核心步骤包括：创建Canvas元素、加载图像、应用动态模糊滤镜并实时更新参数。 以下是具体实现方法：
一、基础环境搭建创建Canvas元素在HTML中添加<canvas>标签，并通过JavaScript获取其2D上下文：
<canvas id="canvas" width="800" height="600"></canvas>const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');加载原始图像使用Image对象加载图片，并在onload回调中执行后续操作：
const image = new Image();image.src = 'path/to/image.jpg';image.onload = function() { // 图像加载完成后执行模糊处理};
应用Canvas滤镜Canvas的filter属性支持CSS滤镜语法，通过blur()方法实现模糊：
ctx.filter = 'blur(5px)'; // 固定模糊半径ctx.drawImage(image, 0, 0); // 绘制模糊图像关键参数说明
blur(amount)中的amount定义模糊半径，值越大模糊效果越强。
滤镜效果会作用于后续所有绘制操作，需在drawImage()前设置。
实时更新模糊半径通过事件监听（如鼠标移动）动态计算模糊值：
let blurAmount = 0;canvas.addEventListener('mousemove', (e) => { // 根据鼠标X坐标比例计算模糊值（范围0-10px） blurAmount = (e.clientX / window.innerWidth) * 10;});使用requestAnimationFrame循环渲染在动画循环中持续更新模糊效果：
function render() { ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除上一帧 ctx.filter = `blur(${blurAmount}px)`; // 应用动态模糊 ctx.drawImage(image, 0, 0); // 重新绘制图像 requestAnimationFrame(render); // 循环调用}image.onload = render; // 图像加载后启动渲染
限制渲染频率对鼠标移动事件进行节流处理，避免频繁触发重绘：
let ticking = false;canvas.addEventListener('mousemove', (e) => { if (!ticking) { window.requestAnimationFrame(() => { blurAmount = (e.clientX / window.innerWidth) * 10; ticking = false; }); ticking = true; }});缓存静态元素若背景不变，可先绘制静态部分到离屏Canvas，减少每帧计算量。
- 交互控制：结合触摸事件实现移动端支持。
- 组合滤镜：叠加brightness()或contrast()增强视觉效果。
- WebGL加速：对复杂场景可使用WebGL实现更高性能的模糊。
通过上述方法，可实现基于用户交互的实时动态模糊效果，适用于图片展示、游戏UI等场景。
热门标签
