js canvas实现红包照片效果

今天跟着学习了一个制作红包照片类似功能的demo，很有意思，所以在这里分享代码给大家，可以直接使用。

先贴出效果图大家看一下：

点击重置后会以随机一个点为圆心生成半径为50px的圆，然后显示清晰的图像；

点击显示后会全部显示清晰的图像；

功能虽然很少，但是很有意思不是吗，而且做好了适配可以在不同分辨率大小的设备上都可以玩。

只需要js+css+html就可以实现，不过需要引入jquery

下面po出完整代码：

demo.html:

 

 

 

 
 
 
  重置 
  显示 

 
 
 

img.css:

*{
 margin: 0 0;
 padding: 0 0;
}
 
#blur-div{

 margin: 0 auto;
 position: relative;
 
 overflow: hidden;
}
 
#blur-image {
 display: block;
 
 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{
 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){
 
 
 context.clearRect(0,0,canvas.width,canvas.height)
 
 context.save()
 
 setClippingRegion(clippingRegion)
 
 //context.drawImage(image, 0 , 0)
 
 context.drawImage(image, 
 leftMargin, topMargin, canvas.width, canvas.height,
 0, 0, canvas.width, canvas.height)
 
 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
 
 )
}
 

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