溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

js canvas實(shí)現(xiàn)紅包照片效果的示例

發(fā)布時(shí)間：2021-05-12 13:10:35 來源：億速云 閱讀：172 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)js canvas實(shí)現(xiàn)紅包照片效果的示例，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

先貼出效果圖大家看一下：

js canvas實(shí)現(xiàn)紅包照片效果的示例

點(diǎn)擊重置后會(huì)以隨機(jī)一個(gè)點(diǎn)為圓心生成半徑為50px的圓，然后顯示清晰的圖像；

點(diǎn)擊顯示后會(huì)全部顯示清晰的圖像；

功能雖然很少，但是很有意思不是嗎，而且做好了適配可以在不同分辨率大小的設(shè)備上都可以玩。

只需要js+css+html就可以實(shí)現(xiàn)，不過需要引入jquery

下面po出完整代碼：

demo.html:

<!DOCTYPE HTML>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Canvas玩兒轉(zhuǎn)紅包照片</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;
 
 /*濾鏡 模糊 括號(hào)內(nèi)值越大，就越模糊*/
 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()
 /*第六個(gè)參數(shù)表示是順時(shí)針還是逆時(shí)針繪制*/
 context.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, Math.PI*2, false)
 /*希望路徑是個(gè)剪輯區(qū)域調(diào)用此方法*/
 context.clip()
}
 
function draw(image ,clippingRegion){
 
 /*每次繪制之前，對(duì)canvas的內(nèi)容進(jìn)行清空*/
 context.clearRect(0,0,canvas.width,canvas.height)
 /*存儲(chǔ)canvas的當(dāng)前狀態(tài)*/
 context.save()
 /*剪輯出一個(gè)圓形的區(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)恢復(fù)*/
 context.restore()
}
 
function reset(){
 initCanvas();
}
 
function show(){
 
 /*此函數(shù)是內(nèi)置函數(shù)，表示每隔多少秒就執(zhí)行前面的函數(shù) 所以第一個(gè)參數(shù)是函數(shù)，后面是間隔時(shí)間*/
 var id = setInterval(
 function(){
  a = id;
  clippingRegion.r += 20
  
  if(clippingRegion.r > 2*Math.max(canvas.width,canvas.height)){
  /*用來關(guān)閉函數(shù)執(zhí)行的*/
  clearInterval(id);
  }
  draw(image ,clippingRegion)
  
 },
 30
 
 )
}
 
/*阻止滑動(dòng)操作*/
/*canvas.addEventListener("touchstart",function(e){
 e.preventDefault()
});*/

關(guān)于“js canvas實(shí)現(xiàn)紅包照片效果的示例”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手