js canvas實(shí)現(xiàn)紅包照片效果
今天跟著學(xué)習(xí)了一個(gè)制作紅包照片類似功能的demo,很有意思,所以在這里分享代碼給大家,可以直接使用。
先貼出效果圖大家看一下:
點(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() });*/
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 使用AutoJs實(shí)現(xiàn)微信搶紅包的代碼
- 基于js實(shí)現(xiàn)抽紅包并分配代碼實(shí)例
- js+css實(shí)現(xiàn)紅包雨效果
- JavaScript實(shí)現(xiàn)微信紅包算法及問題解決方法
- 利用adb shell和node.js實(shí)現(xiàn)抖音搶紅包功能(推薦)
- Javascript網(wǎng)頁搶紅包外掛實(shí)現(xiàn)分享
- js實(shí)現(xiàn)微信/QQ直接跳轉(zhuǎn)到支付寶APP打開口令領(lǐng)紅包功能
- js仿微信搶紅包功能
- 基于JavaScript實(shí)現(xiàn)微信搶紅包功能
- js實(shí)現(xiàn)指定紅包順序和金額算法
相關(guān)文章
Javascript的動(dòng)態(tài)增加類的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫avascript的動(dòng)態(tài)增加類的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10使用uniapp打包微信小程序時(shí)主包和vendor.js過大解決(uniCloud的插件分包)
每個(gè)使用分包小程序必定含有一個(gè)主包,所謂的主包,即放置默認(rèn)啟動(dòng)頁面/TabBar頁面,以及一些所有分包都需用到公共資源/JS 腳本,下面這篇文章主要給大家介紹了關(guān)于使用uniapp打包微信小程序時(shí)主包和vendor.js過大解決的相關(guān)資料,,需要的朋友可以參考下2023-02-02javascript轉(zhuǎn)換字符串為dom對(duì)象(字符串動(dòng)態(tài)創(chuàng)建dom)
那么今天的目的就是教大家怎么去實(shí)現(xiàn)一個(gè)這樣的方法用來把字符串直接轉(zhuǎn)換為標(biāo)準(zhǔn)的dom對(duì)象2010-05-05uni-app返回上一個(gè)頁面并進(jìn)行頁面刷新的方法
這篇文章主要給大家介紹了關(guān)于uni-app返回上一個(gè)頁面并進(jìn)行頁面刷新的相關(guān)資料,返回上一頁面在uniapp有多種方法,文中給出了詳細(xì)的圖文示例,需要的朋友可以參考下2023-07-07javascript強(qiáng)大的日期函數(shù)代碼分享
這篇文章介紹了javascript強(qiáng)大的日期函數(shù)代碼,有需要的朋友可以參考一下2013-09-09JavaScript中輕松獲取頁面參數(shù)值的N種方法(含代碼示例)
本文旨在深入淺出地揭示如何在JavaScript中巧妙提取那些隱藏在URL背后的寶貴信息,從基礎(chǔ)方法到高級(jí)技巧,一網(wǎng)打盡,無論你是編程界的菜鳥還是久經(jīng)沙場的老將,這里都有值得你品鑒的“珍饈”,需要的朋友可以參考下2024-06-06