Canvas实现微信红包照片效果

最新推荐文章于 2024-07-24 21:48:20 发布

Cookysurongbin

最新推荐文章于 2024-07-24 21:48:20 发布

阅读量3.1k

点赞数 1

分类专栏： canvas css3 文章标签： css3 canvas 红包照片

本文链接：https://blog.csdn.net/Cookysurongbin/article/details/50244385

版权

本篇文章来源慕课网课程《canvas玩转红包照片》，用canvas及css3结合，实现红包照片的效果，并不做支付过程，代替的是使用2个按钮，显示清晰图片和重置圆圈可见区域。未做移动的屏幕适应微信红包照片效果图原理分析：先在页面放置一张原图片image，用css3的filter做模糊处理在图片区域上方放置一个与图片image大小一样的canvas，放置整张清晰图片通过canvas的图片剪辑方法，

摘要由CSDN通过智能技术生成

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

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

原理分析：

先在页面放置一张原图片image，用css3的filter做模糊处理
在图片区域上方放置一个与图片image大小一样的canvas，放置整张清晰图片
通过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" />
        <script type="text/javascript" src="js/jquery-2.1.0.js"></script>   
    </head>
    <body>
        <div id="blur-div">
            <img id="blur-image" src="img/gd.jpg" />
            <canvas id="canvas"></canvas><!--大小要在js设置，不要在css设置-->
            <a href="javascript:reset()" class="button" id="reset-button">重置</a>
            <a href="javascript:show()" class="button" id="show-button">显示</a>
        </div>
        <script type="text/javascript" src="js/blur.js"></script>
    </body>
</html>

css代码blur.css

最低0.47元/天解锁文章

Cookysurongbin

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Canvas实现微信红包照片效果

本篇文章来源慕课网课程《canvas玩转红包照片》，用canvas及css3结合，实现红包照片的效果，并不做支付过程，代替的是使用2个按钮，显示清晰图片和重置圆圈可见区域。未做移动的屏幕适应微信红包照片效果图原理分析：先在页面放置一张原图片image，用css3的filter做模糊处理在图片区域上方放置一个与图片image大小一样的canvas，放置整张清晰图片通过canvas的图片剪辑方法，
复制链接

扫一扫

专栏目录