Canvas实现微信红包照片效果

站长资源 2024/11/26 佚名

44 1538 44

DDR爱好者之家 Design By 杰米

本篇文章来源慕课网课程《canvas玩转红包照片》，用canvas及css3结合，实现红包照片的效果，并不做支付过程，代替的是使用2个按钮，显示清晰图片和重置圆圈可见区域。未做移动的屏幕适应

微信红包照片效果图一张模糊图片，只有鱼哥小圆圈的区域是清晰可见

原理分析：

1、先在页面放置一张原图片image，用css3的filter做模糊处理
2、在图片区域上方放置一个与图片image大小一样的canvas，放置整张清晰图片
3、通过canvas的图片剪辑方法，剪辑出一个圆圈区域，就达到了只显示一个圆圈区域的效果

代码及解析

目录结构：

index.html，blur.js，blur.css

index.htm页面代码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
 <title>模糊红包效果</title>
 <link rel="stylesheet" href="css/blur.css" rel="external nofollow" />
 <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-2.1.0.js">

css代码blur.css



*{
 margin:0px;
 padding: 0px;
}

#blur-div{
 width:350px;
 height:220px;
 margin:0 auto;
 position: relative;

 overflow: hidden;
}

.button{
 display: block;
 position: absolute;
 z-index: 200;/*按钮在最上面*/

 width: 60px;
 height: 30px;

 color: white;
 text-decoration: none;
 text-align: center;
 line-height: 30px;

 border-radius: 2px;
}
#reset-button{
 left: 40px;
 bottom: 20px; 
 background-color: #058;
}
#reset-button:hover{
 background-color: #047;
}
#show-button{
 right: 40px;
 bottom: 20px; 
 background-color: #085;
}
#show-button:hover{
 background-color: #074;
}
#canvas{

 display:block;
 margin:0 auto;

 position: absolute;
 left:0px;
 top:0px;
 /*canvas在image之上，在按钮下，z-index大于image,小于btn*/
 z-index: 100;
}

#blur-image{
 display:block;
 width:350px;
 height:220px;
 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:0px;
 top:0px;

 z-index: 0;
}




设置canvas大小要和image大小一样
javascript代码，方法将分片段进行讲解： 

初始化一些参数


var canvasWidth = window.innerWidth; //最外层div宽=窗口宽高，为了适应
var canvasHeight = window.innerHeight;

var canvas = document.getElementById("canvas");//获取到canvas元素对象
var context = canvas.getContext("2d");//获取2d context

//设置canvas大小和最外层div宽高一样
canvas.width = canvasWidth;
canvas.height = canvasHeight;

//用canvas显示清晰图像
var image = new Image();
image.src = "img/gd.jpg";

//剪辑区域
var radius = 30;//剪辑区域圆的半径
var clippingRegion;//剪辑区域对象


底层图片用css3设置过后就已经可以显示在页面上，是一张模糊过的图片，下一步就是在canvas上绘制剪辑图片


image.onload = function(e) {
 //此处js代码设置blur-div 和canvas宽高调整
 $('#blur-div').css("width", canvasWidth + "px");
 $('#blur-div').css("height", canvasHeight + "px");
 $('#blur-image').css("width", image.width + "px");//因为图像大小变化，所以重新设置
 $('#blur-image').css("height", image.height + "px");

 initCanvas();//这是初始化canvas的方法
}




function initCanvas() {
 //重置剪辑区域，归位,随机
 clippingRegion = { //保证剪辑区域一定在有图像的地方
 x: Math.random() * (canvas.width - 2 * radius) + radius, 
 y: Math.random() * (canvas.height - 2 * radius) + radius,
 r: radius
 };
 draw(image, clippingRegion);//这是绘制image的方法
}




//设置剪辑区域
function setClippingRegion(clippingRegion) {
 context.beginPath(); //创建路径
 context.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, Math.PI * 2, false); //画圆形
 context.clip();
}




function draw(image, clippingRegion) {
 context.clearRect(0, 0, canvas.width, canvas.height);
 context.save();
 //图像绘制前，确定剪辑区域
 setClippingRegion(clippingRegion);
 context.drawImage(image, 0, 0);

 context.restore();
}


点击显示按钮show，完全显示清晰图像，复用draw函数，将剪辑区域变大


function show() {
 //添加动画
 var theAnimation = setInterval(function() {
 clippingRegion.r += 20; //慢慢扩大显示
 //边界条件
 if (clippingRegion.r > 2 * Math.max(canvas.width, canvas.height)) { //停止动画，否则函数执行不停止
  clearInterval(theAnimation);
 }
 draw(image, clippingRegion);//循环执行draw方法，慢慢将剪辑区域的半径扩大，实现动画效果
 }, 30);//bug，显示之后立即点击重置，还是会打开图片，可能是因为定时器还没结束
}



重置则再次初始化canvas就行了，在initCanvas已经做了随机位置，所以每次点击重置都是随机位置的剪辑区域


//重置，initCanvas
function reset() {
 initCanvas();
}



完整blur.js代码


var canvasWidth = window.innerWidth; //最外层div宽=窗口宽高，为了适应
var canvasHeight = window.innerHeight;

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

//设置canvas大小和最外层div宽高一样
canvas.width = canvasWidth;
canvas.height = canvasHeight;

//用canvas显示清晰图像
var image = new Image();
var radius = 30;
//剪辑区域
var clippingRegion;
image.src = "img/gd.jpg";


//因为图像加载需要时间，所以用onload方法，等待图片加载完成后再执行函数
image.onload = function(e) {
 //blur-div 和canvas宽高调整
 $('#blur-div').css("width", canvasWidth + "px");
 $('#blur-div').css("height", canvasHeight + "px");

 $('#blur-image').css("width", image.width + "px");
 $('#blur-image').css("height", image.height + "px");

 initCanvas();
}

function initCanvas() {
 //重置剪辑区域，归位,随机

 clippingRegion = { //保证剪辑区域一定在有图像的地方
 x: Math.random() * (canvas.width - 2 * radius) + radius, //30-320 0-width 减掉半径30 350-30*2
 y: Math.random() * (canvas.height - 2 * radius) + radius, //30-190 0-height 减掉半径30 220-30*2
 r: radius
 };
 draw(image, clippingRegion);
}

//设置剪辑区域
function setClippingRegion(clippingRegion) {
 context.beginPath(); //创建路径
 context.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, Math.PI * 2, false); //画圆形
 context.clip();
}

function draw(image, clippingRegion) {
 context.clearRect(0, 0, canvas.width, canvas.height);

 context.save();
 //图像绘制前，确定剪辑区域
 setClippingRegion(clippingRegion);

 context.drawImage(image, 0, 0); //图片大于canvas

 context.restore();
}

//完全显示清晰图像，复用draw函数，将剪辑区域变大
function show() {
 //添加动画,此函数有缺点
 clippingRegion.r=radius;//给半径归位
 var theAnimation = setInterval(function() {
 console.log("anima");
 clippingRegion.r += 20; //慢慢扩大显示
 //边界条件
 if (clippingRegion.r > 2 * Math.max(canvas.width, canvas.height)) { //停止动画，否则函数执行不停止1000
  clearInterval(theAnimation);
 }
 draw(image, clippingRegion);
 }, 30);
}

//重置，initCanvas
function reset() {
 initCanvas();
}


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

canvas微信红包照片,canvas微信红包,canvas红包照片

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“Canvas实现微信红包照片效果”

暂无评论...

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

Canvas实现微信红包照片效果

js动态设置select下拉菜单的默认选中项实例

Vue开发实现吸顶效果的示例代码

评论“Canvas实现微信红包照片效果”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接