Canvas模仿微信红包照片

最新推荐文章于 2021-02-20 16:21:47 发布

翻译最新推荐文章于 2021-02-20 16:21:47 发布 · 2.1k 阅读

文章标签：

#canvas #微信 #图片 #模糊效果

JavaScript 同时被 2 个专栏收录

12 篇文章

订阅专栏

HTML

12 篇文章

订阅专栏

本文详细介绍了如何使用HTML、CSS和JavaScript技术，在网页中创建动态模糊背景效果，包括加载图片、应用模糊滤镜、使用canvas元素进行绘制及交互设计等关键步骤。通过设置两个按钮，实现对图片进行随机剪辑区域和显示原始图片的操作，为网页增加互动性和视觉吸引力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.最终效果：

2.实现过程：

1.将图片加载出来，并加上模糊效果：
index.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.2.0.min.js"></script>
    <link href="image.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="blur-div">
        <img id="blur-image" src="me.jpg"/>
        <canvas id="canvas">no canvas</canvas>
    </div>

    <script src="blur.js"></script>

</body>
</html>

image.css:

#blur-div{
    display: block;
    width: 600px;
    height: 800px;
    margin: 0 auto;
    position: relative;
}
#blur-image{
    display: block;
    width: 600px;
    height: 800px;
    margin: 0 auto;

    filter: blur(20px);
    -webkit-filter: blur(20px);
    -moz-filter:blur(20px);
    -ms-filter:blur(20px);
    -o-filter:blur(20px);

    position: absolute;
    left: 0;
    top: 0;

    z-index: 0;
}
#canvas{
    display: block;
    margin: 0 auto;

    position: absolute;
    left: 0;
    top: 0;

    z-index: 100;

}

效果：

2.把canvas覆盖在图片上面，用同一张图片：
blur.js:

var canvasWidth = 600;
var canvasHeight = 800;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

canvas.width = canvasWidth;
canvas.height = canvasHeight;

var image = new Image();
image.src = "me.jpg";
//因为图片可能比较大，等待加载完了再运行逻辑
image.onload = function(e){
    initCanvas();
}

function initCanvas(){
    draw(image);
}

function draw(image){
    context.clearRect(0,0,canvas.width,canvas.height);
    context.save();
    context.drawImage(image,0,0,600,800);
    context.restore();
}

效果，可以看到后面还有模糊的背景：

3.先绘制一个固定的圆形剪辑区域（具体代码最后给出）：

var clipRegion = {x:400,y:200,r:80};//剪辑区域对象
//绘制剪辑区域
function setClipRegion(clipRegion){
    context.beginPath();
    context.arc(clipRegion.x,clipRegion.y,clipRegion.r,0,Math.PI*2,false);
    context.clip();
}

效果：

4.交互设计：
设置两个button，一个随机剪辑区域，一个查看图片

完成两个按钮的点击事件：

function reset(){
    initCanvas();
}

function show(){
    clipRegion.r = 1000;
    draw(image,clipRegion);
}

效果可以自己试试：

3.源代码:

canvas与模糊效果