js+canvas特效图片

JavaScript 结合 Canvas 可以实现丰富的图片特效。以下是一些基础概念、优势、类型、应用场景以及常见问题及其解决方法。

基础概念

Canvas: HTML5 提供的一个绘图 API，允许通过 JavaScript 在网页上绘制图形。
JavaScript: 一种脚本语言，用于实现网页上的动态交互效果。

优势

实时渲染: 可以在浏览器中实时生成和修改图像。
性能: 直接操作像素级数据，适合处理大量图形计算。
灵活性: 可以创建各种复杂的视觉效果和动画。

类型

滤镜效果: 如模糊、锐化、灰度等。
动画效果: 如粒子系统、滚动视差等。
交互式图形: 如绘图工具、游戏界面等。

应用场景

游戏开发: 制作2D或简单的3D游戏。
数据可视化: 展示统计图表和复杂数据。
艺术创作: 创作数字艺术作品和动态背景。
教育应用: 制作互动教学材料。

示例代码：创建一个简单的模糊滤镜效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Blur Effect</title>
<style>
canvas {
    border: 1px solid black;
}
</style>
</head>
<body>

<canvas id="myCanvas" width="500" height="500"></canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 加载图片
const img = new Image();
img.src = 'path_to_your_image.jpg';
img.onload = () => {
    ctx.drawImage(img, 0, 0);
    applyBlur(5); // 应用模糊效果，参数为模糊半径
};

function applyBlur(radius) {
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    const kernel = createGaussianKernel(radius);

    for (let y = 0; y < canvas.height; y++) {
        for (let x = 0; x < canvas.width; x++) {
            let r = 0, g = 0, b = 0;
            let weightSum = 0;

            for (let ky = -radius; ky <= radius; ky++) {
                for (let kx = -radius; kx <= radius; kx++) {
                    const ix = x + kx;
                    const iy = y + ky;
                    if (ix >= 0 && ix < canvas.width && iy >= 0 && iy < canvas.height) {
                        const i = (iy * canvas.width + ix) * 4;
                        const weight = kernel[(ky + radius) * (2 * radius + 1) + (kx + radius)];
                        r += data[i] * weight;
                        g += data[i + 1] * weight;
                        b += data[i + 2] * weight;
                        weightSum += weight;
                    }
                }
            }

            const i = (y * canvas.width + x) * 4;
            data[i] = r / weightSum;
            data[i + 1] = g / weightSum;
            data[i + 2] = b / weightSum;
        }
    }

    ctx.putImageData(imageData, 0, 0);
}

function createGaussianKernel(radius) {
    const size = 2 * radius + 1;
    const kernel = new Array(size * size);
    const sigma = radius / 3;
    let sum = 0;

    for (let y = -radius; y <= radius; y++) {
        for (let x = -radius; x <= radius; x++) {
            const g = gaussian(x, y, sigma);
            kernel[(y + radius) * size + (x + radius)] = g;
            sum += g;
        }
    }

    for (let i = 0; i < kernel.length; i++) {
        kernel[i] /= sum;
    }

    return kernel;
}

function gaussian(x, y, sigma) {
    return Math.exp(-(x * x + y * y) / (2 * sigma * sigma)) / (2 * Math.PI * sigma * sigma);
}
</script>

</body>
</html>