Canvas實現(xiàn)微信紅包照片效果
更新時間：2018年08月21日 14:28:16 作者：cookysurongbin
這篇文章主要為大家詳細(xì)介紹了Canvas實現(xiàn)微信紅包照片效果，用canvas及css3結(jié)合，實現(xiàn)紅包照片的效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本篇文章來源慕課網(wǎng)課程《canvas玩轉(zhuǎn)紅包照片》，用canvas及css3結(jié)合，實現(xiàn)紅包照片的效果，并不做支付過程，代替的是使用2個按鈕，顯示清晰圖片和重置圓圈可見區(qū)域。未做移動的屏幕適應(yīng)
微信紅包照片效果圖一張模糊圖片，只有魚哥小圓圈的區(qū)域是清晰可見
原理分析：
1、先在頁面放置一張原圖片image，用css3的filter做模糊處理
2、在圖片區(qū)域上方放置一個與圖片image大小一樣的canvas，放置整張清晰圖片
3、通過canvas的圖片剪輯方法，剪輯出一個圓圈區(qū)域，就達(dá)到了只顯示一個圓圈區(qū)域的效果
代碼及解析
目錄結(jié)構(gòu)：
>
index.html，blur.js，blur.css
index.htm頁面代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <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"/> <title>模糊紅包效果</title> <link rel="stylesheet" href="css/blur.css" rel="external nofollow" /> <script type="text/javascript" src="js/jquery-2.1.0.js"></script> </head> <body> <div id="blur-div"> <img id="blur-image" src="img/gd.jpg" /> <canvas id="canvas"></canvas><!--大小要在js設(shè)置，不要在css設(shè)置--> <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="js/blur.js"></script> </body> </html>
css代碼blur.css
*{
margin:0px;
padding: 0px;
}
#blur-div{
width:350px;
height:220px;
margin:0 auto;
position: relative;
overflow: hidden;
}
.button{
display: block;
position: absolute;
z-index: 200;/*按鈕在最上面*/
width: 60px;
height: 30px;
color: white;
text-decoration: none;
text-align: center;
line-height: 30px;
border-radius: 2px;
}
#reset-button{
left: 40px;
bottom: 20px;
background-color: #058;
}
#reset-button:hover{
background-color: #047;
}
#show-button{
right: 40px;
bottom: 20px;
background-color: #085;
}
#show-button:hover{
background-color: #074;
}
#canvas{
display:block;
margin:0 auto;
position: absolute;
left:0px;
top:0px;
/*canvas在image之上，在按鈕下，z-index大于image,小于btn*/
z-index: 100;
}
#blur-image{
display:block;
width:350px;
height:220px;
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;
}
設(shè)置canvas大小要和image大小一樣
javascript代碼，方法將分片段進行講解：
初始化一些參數(shù)
var canvasWidth = window.innerWidth; //最外層div寬=窗口寬高，為了適應(yīng)
var canvasHeight = window.innerHeight;
var canvas = document.getElementById("canvas");//獲取到canvas元素對象
var context = canvas.getContext("2d");//獲取2d context
//設(shè)置canvas大小和最外層div寬高一樣
canvas.width = canvasWidth;
canvas.height = canvasHeight;
//用canvas顯示清晰圖像
var image = new Image();
image.src = "img/gd.jpg";
//剪輯區(qū)域
var radius = 30;//剪輯區(qū)域圓的半徑
var clippingRegion;//剪輯區(qū)域?qū)ο?/pre>
底層圖片用css3設(shè)置過后就已經(jīng)可以顯示在頁面上，是一張模糊過的圖片，下一步就是在canvas上繪制剪輯圖片
image.onload = function(e) {
//此處js代碼設(shè)置blur-div 和canvas寬高調(diào)整
$('#blur-div').css("width", canvasWidth + "px");
$('#blur-div').css("height", canvasHeight + "px");
$('#blur-image').css("width", image.width + "px");//因為圖像大小變化，所以重新設(shè)置
$('#blur-image').css("height", image.height + "px");
initCanvas();//這是初始化canvas的方法
}
function initCanvas() {
//重置剪輯區(qū)域，歸位,隨機
clippingRegion = { //保證剪輯區(qū)域一定在有圖像的地方
x: Math.random() * (canvas.width - 2 * radius) + radius,
y: Math.random() * (canvas.height - 2 * radius) + radius,
r: radius
};
draw(image, clippingRegion);//這是繪制image的方法
}
//設(shè)置剪輯區(qū)域
function setClippingRegion(clippingRegion) {
context.beginPath(); //創(chuàng)建路徑
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();
//圖像繪制前，確定剪輯區(qū)域
setClippingRegion(clippingRegion);
context.drawImage(image, 0, 0);
context.restore();
}
點擊顯示按鈕show，完全顯示清晰圖像，復(fù)用draw函數(shù)，將剪輯區(qū)域變大
function show() {
//添加動畫
var theAnimation = setInterval(function() {
clippingRegion.r += 20; //慢慢擴大顯示
//邊界條件
if (clippingRegion.r > 2 * Math.max(canvas.width, canvas.height)) { //停止動畫，否則函數(shù)執(zhí)行不停止
clearInterval(theAnimation);
}
draw(image, clippingRegion);//循環(huán)執(zhí)行draw方法，慢慢將剪輯區(qū)域的半徑擴大，實現(xiàn)動畫效果
}, 30);//bug，顯示之后立即點擊重置，還是會打開圖片，可能是因為定時器還沒結(jié)束
}
重置則再次初始化canvas就行了，在initCanvas已經(jīng)做了隨機位置，所以每次點擊重置都是隨機位置的剪輯區(qū)域
//重置，initCanvas
function reset() {
initCanvas();
}
完整blur.js代碼
var canvasWidth = window.innerWidth; //最外層div寬=窗口寬高，為了適應(yīng)
var canvasHeight = window.innerHeight;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
//設(shè)置canvas大小和最外層div寬高一樣
canvas.width = canvasWidth;
canvas.height = canvasHeight;
//用canvas顯示清晰圖像
var image = new Image();
var radius = 30;
//剪輯區(qū)域
var clippingRegion;
image.src = "img/gd.jpg";
//因為圖像加載需要時間，所以用onload方法，等待圖片加載完成后再執(zhí)行函數(shù)
image.onload = function(e) {
//blur-div 和canvas寬高調(diào)整
$('#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");
initCanvas();
}
function initCanvas() {
//重置剪輯區(qū)域，歸位,隨機
clippingRegion = { //保證剪輯區(qū)域一定在有圖像的地方
x: Math.random() * (canvas.width - 2 * radius) + radius, //30-320 0-width 減掉半徑30 350-30*2
y: Math.random() * (canvas.height - 2 * radius) + radius, //30-190 0-height 減掉半徑30 220-30*2
r: radius
};
draw(image, clippingRegion);
}
//設(shè)置剪輯區(qū)域
function setClippingRegion(clippingRegion) {
context.beginPath(); //創(chuàng)建路徑
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();
//圖像繪制前，確定剪輯區(qū)域
setClippingRegion(clippingRegion);
context.drawImage(image, 0, 0); //圖片大于canvas
context.restore();
}
//完全顯示清晰圖像，復(fù)用draw函數(shù)，將剪輯區(qū)域變大
function show() {
//添加動畫,此函數(shù)有缺點
clippingRegion.r=radius;//給半徑歸位
var theAnimation = setInterval(function() {
console.log("anima");
clippingRegion.r += 20; //慢慢擴大顯示
//邊界條件
if (clippingRegion.r > 2 * Math.max(canvas.width, canvas.height)) { //停止動畫，否則函數(shù)執(zhí)行不停止1000
clearInterval(theAnimation);
}
draw(image, clippingRegion);
}, 30);
}
//重置，initCanvas
function reset() {
initCanvas();
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了js轉(zhuǎn)換對象為xml的方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
在做html頁面開發(fā)時，經(jīng)常會使用到j(luò)s（javascript）來處理客戶端的邏輯，下面我們就來看一下，如何使用js來獲取頁面上的元素2019-05-05
基于bootstrap寫的一點localStorage本地儲存
這篇文章主要介紹了基于bootstrap寫的一點localStorage本地儲存,需要的朋友可以參考下2017-11-11
js如何實現(xiàn)小程序wx.arrayBufferToBase64方法實例
這篇文章主要給大家介紹了關(guān)于js如何實現(xiàn)小程序wx.arrayBufferToBase64方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-03-03
bootstrap datetimepicker2.3.11時間插件使用
這篇文章主要為大家詳細(xì)介紹了bootstrap datetimepicker2.3.11時間插件使用方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
遇到了操作iframe的相關(guān)問題，其實就是在操作iframe內(nèi)部某個窗體時，調(diào)用父窗體的一個函數(shù)，下面與大家分享下操作iframe兼容各種瀏覽器的方法2013-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崙?zhàn)商城系列之側(cè)欄分類效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了js靜態(tài)檢查工具eslint配置文件的相關(guān)知識，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-11-11
這篇文章主要介紹了讓alert不出現(xiàn)彈窗的兩種方法,需要的朋友可以參考下2014-05-05
JavaScript 中的輸出數(shù)據(jù)多種方式
在 JavaScript 中，不像 Java 等語言，它沒有任何打印或者輸出方法的，在js中通過使用4種方式來輸出數(shù)據(jù)，本文通過實例代碼給大家詳細(xì)介紹，感興趣的朋友跟隨小編一起看看吧2022-03-03