js canvas實現紅包照片效果

更新時間：2018年08月21日 12:11:11 作者：yesz12358

這篇文章主要介紹了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){
 /*創(chuàng)建剪輯區(qū)域的路徑*/
 context.beginPath()
 /*第六個參數表示是順時針還是逆時針繪制*/
 context.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, Math.PI*2, false)
 /*希望路徑是個剪輯區(qū)域調用此方法*/
 context.clip()
}
 
function draw(image ,clippingRegion){
 
 /*每次繪制之前，對canvas的內容進行清空*/
 context.clearRect(0,0,canvas.width,canvas.height)
 /*存儲canvas的當前狀態(tài)*/
 context.save()
 /*剪輯出一個圓形的區(qū)域*/
 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的狀態(tài)恢復*/
 context.restore()
}
 
function reset(){
 initCanvas();
}
 
function show(){
 
 /*此函數是內置函數，表示每隔多少秒就執(zhí)行前面的函數 所以第一個參數是函數，后面是間隔時間*/
 var id = setInterval(
 function(){
  a = id;
  clippingRegion.r += 20
  
  if(clippingRegion.r > 2*Math.max(canvas.width,canvas.height)){
  /*用來關閉函數執(zhí)行的*/
  clearInterval(id);
  }
  draw(image ,clippingRegion)
  
 },
 30
 
 )
}
 
/*阻止滑動操作*/
/*canvas.addEventListener("touchstart",function(e){
 e.preventDefault()
});*/

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: