欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

canvas紅包照片實例分享

 更新時間:2017年02月28日 09:55:17   作者:ywhluck  
本文主要分享了canvas紅包照片的實例代碼,具有很好的參考價值,下面跟著小編一起來看下吧

效果:

點擊RESET:隨機顯示剪輯區(qū)域;

點擊SHOW:顯示完整清晰圖片;

圖(1)點擊RESET

圖(2)點擊SHOW

代碼如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas紅包照片</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
 #blur_div{
 width: 500px;
 height: 334px;
 margin: 0 auto;
 position: relative;
 margin-top:100px;
 }
 #blur_img{
 display: block;
 width: 500px;
 height: 334px;
 margin: 0 auto;
 filter: blur(15px);/*CSS3模糊*/
 -webkit-filter: blur(15px);
 -moz-filter: blur(15px);
 -ms-filter: blur(15px);
 -o-filter: blur(15px);
 position:absolute;
 left: 0px;
 top: 0px;
 z-index: 0;
 }
 #canvas{
 display: block;
 margin: 0 auto;
 position:absolute;
 left: 0px;
 top: 0px;
 z-index: 100;
/* background-color:red;*/
 }
 .button{
 display:block;
 position:absolute;
 z-index:200;
 width:80px;
 height:30px;
 color:white;
 text-decoration:none;
 text-align:center;
 line-height:30px;
 border-radius:5px;
 }
 #reset_button{
 left:100px;
 bottom:20px;
 background-color:#058;
 }
 #reset_button:hover{
 background-color:#047;
 }
 #show_button{
 right:100px;
 bottom:20px;
 background-color:#085;
 }
 #show_button:hover{
 background-color:#074;
 }
</style>
</head>
<body>
 <div id="blur_div">
 <img id="blur_img" src="http://cdn.attach.qdfuns.com/notes/pics/201702/27/221935e35ugwllljg10912.jpg" />
  <canvas id="canvas"></canvas>
  <a href="javascript:reset()" rel="external nofollow" class="button" id="reset_button">RESET</a>
  <a href="javascript:show()" rel="external nofollow" class="button" id="show_button">SHOW</a>
  </div>
 <script>
   var canvasWidth = 500;
 var canvasHeight = 334;
 var canvas = document.getElementById("canvas");
 var context = canvas.getContext("2d");
 canvas.width = canvasWidth;
 canvas.height = canvasHeight;
 /*在canvas上繪制清晰的圖片*/
 var image = new Image();
 var radius = 40;
 var clippingRegion = {x:-1,y:-1,r:radius};/*初始化剪輯區(qū)域*/
 image.src = "http://cdn.attach.qdfuns.com/notes/pics/201702/27/221935e35ugwllljg10912.jpg";
 image.onload = function(e){
  initCanvas();
 }
 function initCanvas(){
  clippingRegion = {x:Math.random()*(canvas.width-2*radius)+radius,
     y:Math.random()*(canvas.height-2*radius)+radius,
     r:radius};/*隨機剪輯區(qū)域*/
  draw(image,clippingRegion);
 }
 function setClippingRegion(clippingRegion){
  context.beginPath();
  context.arc(clippingRegion.x,clippingRegion.y,clippingRegion.r,0,2*Math.PI,false);/*繪制剪輯區(qū)域的路徑*/
  context.clip();
 }
 function draw(image,clippingRegion){
  context.clearRect(0,0,canvas.width,canvas.height);/*清除畫布*/
  context.save();
  setClippingRegion(clippingRegion);/*重新設(shè)置剪輯區(qū)域*/
  context.drawImage(image,0,0);
  context.restore();
 }
 /*重置顯示剪輯區(qū)域*/
 function reset(){
  initCanvas();
 }
 /*顯示整個清晰圖片*/
 function show(){
  var theAnimation = setInterval( 
  function(){
   clippingRegion.r += 20; 
   if(clippingRegion.r>2*Math.max(canvas.width,canvas.height)){
   clearInterval(theAnimation);
   }
   draw(image,clippingRegion);
  },20)
 }  
  </script>
</body>
</html>

以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!

相關(guān)文章

  • 如何在JavaScript中謹慎使用代碼注釋

    如何在JavaScript中謹慎使用代碼注釋

    這篇文章主要介紹了如何在JavaScript中謹慎使用代碼注釋,必要的注釋可以闡明實現(xiàn)細節(jié)和設(shè)計意圖,以此節(jié)約自己和別人的時間。 然而很多時候注釋起的作用卻適得其反,,需要的朋友可以參考下
    2019-06-06
  • javascript使用substring實現(xiàn)的展開與收縮文字功能示例

    javascript使用substring實現(xiàn)的展開與收縮文字功能示例

    這篇文章主要介紹了javascript使用substring實現(xiàn)的展開與收縮文字功能,涉及javascript元素遍歷與屬性設(shè)置相關(guān)操作技巧,需要的朋友可以參考下
    2019-06-06
  • JS如何實現(xiàn)手機端輸入驗證碼效果

    JS如何實現(xiàn)手機端輸入驗證碼效果

    這篇文章主要介紹了JS如何實現(xiàn)手機端輸入驗證碼效果,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-05-05
  • 微信小程序開發(fā)之實現(xiàn)心情記事本

    微信小程序開發(fā)之實現(xiàn)心情記事本

    這篇文章主要為大家詳細介紹了如何通過微信小程序開發(fā)一個簡單的心情記事本,文中的示例代碼講解詳細,感興趣的小伙伴可以和小編一起學習一下
    2023-01-01
  • 談?wù)凧S中的!!

    談?wù)凧S中的!!

    !!一般用來將后面的表達式強制轉(zhuǎn)換為布爾類型的數(shù)據(jù)(boolean),也就是只能是true或者false。下面看看通過本文給大家介紹了JS中的!!,需要的朋友參考下吧
    2017-12-12
  • JavaScript設(shè)計模式之觀察者模式(發(fā)布者-訂閱者模式)

    JavaScript設(shè)計模式之觀察者模式(發(fā)布者-訂閱者模式)

    這篇文章主要介紹了JavaScript設(shè)計模式之觀察者模式(發(fā)布者-訂閱者模式),本文詳細的講解了JavaScript中的觀察者模式,需要的朋友可以參考下
    2014-09-09
  • JS實現(xiàn)提示框跟隨鼠標移動

    JS實現(xiàn)提示框跟隨鼠標移動

    在本篇內(nèi)容里小編給各位整理了一篇關(guān)于JS實現(xiàn)提示框跟隨鼠標移動的相關(guān)實例代碼,需要的朋友們學習下。
    2019-08-08
  • JS文本框不能輸入空格驗證方法

    JS文本框不能輸入空格驗證方法

    JS文本框不能輸入空格驗證方法,需要的朋友可以參考一下
    2013-03-03
  • JavaScript String(字符串)對象的簡單實例(推薦)

    JavaScript String(字符串)對象的簡單實例(推薦)

    下面小編就為大家?guī)硪黄狫avaScript String(字符串)對象的簡單實例(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-08
  • 簡單的漸變輪播插件

    簡單的漸變輪播插件

    本文主要介紹了簡單的漸變輪播插件,具有一定的參考價值,下面跟著小編一起來看下吧
    2017-01-01

最新評論