Canvas模仿微信红包照片

来源：互联网发布：股票实时行情数据接口编辑：程序博客网时间：2024/06/11 15:47

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与模糊效果

1 1