這篇文章將為大家詳細講解有關js canvas實現紅包照片效果的示例，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
先貼出效果圖大家看一下：
點擊重置后會以隨機一個點為圓心生成半徑為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()
});*/關于“js canvas實現紅包照片效果的示例”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
