js canvas实现红包照片效果
今天跟着学习了一个制作红包照片类似功能的demo，很有意思，所以在这里分享代码给大家，可以直接使用。
先贴出效果图大家看一下：
点击重置后会以随机一个点为圆心生成半径为50px的圆，然后显示清晰的图像；
点击显示后会全部显示清晰的图像；
功能虽然很少，但是很有意思不是吗，而且做好了适配可以在不同分辨率大小的设备上都可以玩。
只需要js+css+html就可以实现，不过需要引入jquery
下面po出完整代码：
demo.html:
<!DOCTYPE HTML> <html> <head lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Canvas玩儿转红包照片</title> <script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js" type="text/javascript"></script> <link href="img.css" rel="external nofollow" rel="stylesheet" type="text/css" /> <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"/> </head> <body> <div id="blur-div"> <img src="images/1.jpg" id="blur-image"> <canvas id="canvas"> </canvas> <a href="javascript:reset()" rel="external nofollow" class="button" id="reset-button"> 重置 </a> <a href="javascript:show()" rel="external nofollow" class="button" id="show-button"> 显示 </a> </div> <script type="text/javascript" src="img.js"></script> </body> </html>
img.css:
*{
margin: 0 0;
padding: 0 0;
}
#blur-div{
/* width: 800px;
height: 500px;*/
margin: 0 auto;
position: relative;
/*超过部分隐藏*/
overflow: hidden;
}
#blur-image {
display: block;
/*width: 800px;
height: 500px;*/
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轴上的值*/
z-index: 0;
}
#canvas{
display: block;
margin: 0 auto;
position: absolute;
left: 0px;
top: 0px;
z-index: 100;
}
.button{
display: block;
position: absolute;
z-index: 200;
width: 100px;
height: 30px;
color: white;
text-decoration: none;
text-align: center;
line-height: 30px;
border-radius: 5px;
}
#reset-button{
left: 50px;
bottom: 20px;
background-color: #058;
}
#reset-button:hover{
background-color: #047;
}
#show-button{
right: 50px;
bottom: 20px;
background-color: #085;
}
#show-button:hover{
background-color: #074;
}
img.js:
var canvasWidth = window.innerWidth
var canvasHeight = window.innerHeight
var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
canvas.width=canvasWidth
canvas.height=canvasHeight
var radius = 50
var image = new Image()
var clippingRegion = {x:-1,y:-1,r:radius}
var leftMargin = 0, topMargin=0
var a;
image.src = "images/1.jpg"
image.onload = function(e){
$("#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")
leftMargin = (image.width - canvas.width) / 2
topMargin = (image.height - canvas.height) / 2
$("#blur-image").css("top", "-" + topMargin + "px")
$("#blur-image").css("left", "-" + leftMargin + "px")
initCanvas()
}
function initCanvas(){
clearInterval(a)
clippingRegion = {x:Math.random()*(canvas.width-2*radius)+radius,y:Math.random()*(canvas.height-2*radius)+radius,r:radius}
console.log(canvas.width);
console.log(canvas.height);
clippingRegion.r = 0;
var id = setInterval(
function(){
clippingRegion.r += 2;
if(clippingRegion.r > 50){
clearInterval(id)
}
draw(image,clippingRegion)
},
30
)
}
function setClippingRegion(clippingRegion){
/*创建剪辑区域的路径*/
context.beginPath()
/*第六个参数表示是顺时针还是逆时针绘制*/
context.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, Math.PI*2, false)
/*希望路径是个剪辑区域调用此方法*/
context.clip()
}
function draw(image ,clippingRegion){
/*每次绘制之前，对canvas的内容进行清空*/
context.clearRect(0,0,canvas.width,canvas.height)
/*存储canvas的当前状态*/
context.save()
/*剪辑出一个圆形的区域*/
setClippingRegion(clippingRegion)
/*开始画*/
//context.drawImage(image, 0 , 0)
/*leftMargin, topMargin, canvas.width, canvas.height表示image剪出这么大
0, 0, canvas.width, canvas.height 表示canvas的大小
*/
context.drawImage(image,
leftMargin, topMargin, canvas.width, canvas.height,
0, 0, canvas.width, canvas.height)
/*canvas的状态恢复*/
context.restore()
}
function reset(){
initCanvas();
}
function show(){
/*此函数是内置函数，表示每隔多少秒就执行前面的函数 所以第一个参数是函数，后面是间隔时间*/
var id = setInterval(
function(){
a = id;
clippingRegion.r += 20
if(clippingRegion.r > 2*Math.max(canvas.width,canvas.height)){
/*用来关闭函数执行的*/
clearInterval(id);
}
draw(image ,clippingRegion)
},
30
)
}
/*阻止滑动操作*/
/*canvas.addEventListener("touchstart",function(e){
e.preventDefault()
});*/
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Canvas实现微信红包照片效果
本篇文章来源慕课网课程<canvas玩转红包照片>,用canvas及css3结合,实现红包照片的效果,并不做支付过程,代替的是使用2个按钮,显示清晰图片和重置圆圈可见区域.未做移动的屏幕适应 微信红包照片效果图一张模糊图片,只有鱼哥小圆圈的区域是清晰可见 原理分析: 1.先在页面放置一张原图片image,用css3的filter做模糊处理 2.在图片区域上方放置一个与图片image大小一样的canvas,放置整张清晰图片 3.通过canvas的图片剪辑方法,剪辑出一个圆圈区域,就达到了只显示一
-
canvas红包照片实例分享
效果: 点击RESET:随机显示剪辑区域: 点击SHOW:显示完整清晰图片: 图(1)点击RESET 图(2)点击SHOW 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas红包照片</title> <script type="text/javascript" src="https://
-
基于JavaScript实现微信抢红包功能
金额随机:额度在0.01和(剩余平均值*2)之间. /** * 抢红包 * @param {[number]} totalAmount [总金额] * @param {[number]} totalPeople [总人数] * @return {[Array]} [每个人抢到的金额] */ function assign(totalAmount, totalPeople){ var remainAmount = +totalAmount; var remainPeople = +totalPeo
-
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
最近支付宝的领红包可真是刷爆了各个微信群啊,满群都是支付宝口令. 可是这样推广可不是办法,又要复制又要打开支付宝又要点领取,太麻烦了. 于是乎,提出了一个疑问! 是否可以在微信里面点一个链接然后直接打开支付宝并自动领取呢??? 就像下面这样! 上图解说: 1.点击一个url 2.立即跳转到支付宝APP 3.并且秒领红包 对,没错,上面就是本次案例的demo 大家可以扫码体验: 实现的原理很简单 源码只有一个html文件和js文件 html只要是方便加载js index.html <!DOCTYP
-
js仿微信抢红包功能
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿微信抢红包</title> <style> html,body,div{margin:0;padding:0;} body{background:#EAEAEA;font:16px/1.8 &quo
-
JavaScript实现微信红包算法及问题解决方法
专栏停更了很久,向大家说声抱歉.今天的主题是使用JavaScript模拟实现微信抢红包的算法.这个题目看起来很简单,不就是一个随机函数吗?我们一起实现看看. 我们假设有一个100元的红包,要发给10个人.为了保证公平,算法需要保证以下的原则: 每个人最少能抢到0.01元 每个人的机会平等 所有人的金额之和等于100元 1.简单的随机函数实现 很多朋友的一般思路是: 第一步:从0-100中随机一个数,得到第一个红包金额. 第二步:从0-剩余金额中随机一个数,得到第二个红包金额. 第三步:... 最
-
js canvas实现红包照片效果
今天跟着学习了一个制作红包照片类似功能的demo,很有意思,所以在这里分享代码给大家,可以直接使用. 先贴出效果图大家看一下: 点击重置后会以随机一个点为圆心生成半径为50px的圆,然后显示清晰的图像: 点击显示后会全部显示清晰的图像: 功能虽然很少,但是很有意思不是吗,而且做好了适配可以在不同分辨率大小的设备上都可以玩. 只需要js+css+html就可以实现,不过需要引入jquery 下面po出完整代码: demo.html: <!DOCTYPE HTML> <html> &l
-
js canvas实现写字动画效果
本文实例为大家分享了js canvas实现写字动画效果展示的具体代码,供大家参考,具体内容如下 页面html: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>学写一个字</title> <script src="jquery-2.1.3.min.js" type="t
-
JS Canvas接口和动画效果大全
概述 <canvas>元素用于生成图像.它本身就像一个画布,JavaScript通过操作它的 API,在上面生成图像.它的底层是一个个像素,基本上<canvas>是一个可以用JavaScript操作的位图(bitmap). 它与 SVG 图像的区别在于,<canvas>是脚本调用各种方法生成图像,SVG 则是一个 XML 文件,通过各种子元素生成图像. 使用 Canvas API 之前,需要在网页里面新建一个<canvas>元素. <canvas id
-
JS+Canvas 实现下雨下雪效果
最近做了一个项目,其中有需求要实现下雨小雪的动画特效,所以在此做了个drop组件,来展现这种canvas常见的下落物体效果.在没给大家介绍正文之前,先给大家展示下效果图: 展示效果图: 下雨 下雪 看起来效果还是不错的,相对于使用创建dom元素来制作多物体位移动画, 使用canvas会更加容易快捷,以及性能会更好 调用代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U
-
原生js canvas实现鼠标跟随效果
本文实例为大家分享了canvas实现鼠标跟随效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas鼠标跟随效果(原生js实现)</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.m
-
原生js+canvas实现贪吃蛇效果
本文实例为大家分享了canvas实现贪吃蛇效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: 页面布局展示:worm.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>贪吃蛇</title> <style type="text/css"> canvas{ border: 1px solid
-
js+canvas实现代码雨效果
本文实例为大家分享了js+canvas代码雨效果的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } html,body{ height:
-
js Canvas绘制圆形时钟效果
本文实例为大家分享了js Canvas圆形时钟的具体实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Canvas Clock</title> <style type="text/css"> div{ text-align: center; margin-top: 250px
-
JS+Canvas绘制动态时钟效果
本文实例为大家分享了Canvas绘制动态时钟效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #mycanvas{ position: absolute; left:50%; margin-left:-250px; border:5px solid #