canvas玩转微信红包

CSS3相关属性：

<!DOCTYPE html>
<html>
<head lang='en'>
     <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-scale= no' />
     <title>canvas玩转微信红包</title>
     <script src='jquery-1.10.2.min.js' type='text/javascript'></script>
     <style>
     *{
       padding:0px;
       margin:0px;
     }
     #blur-div{
        width: 620px;
        height: 350px;
        position: relative;
        margin: 0 auto;
     }
     #blur-image{
        width: 620px;
        height: 350px;
        display: block;
        margin: 0 auto;
        
        filter: blur(5px); /*grayscale（灰度）/sepia（黄棕色）/saturate（饱和度）/hue-rotate（色相）/invert（反色）/opacity（不透明度）/brightness（明度）/contrast/（对比度）blur（模糊）/drop-shadow（阴影）*/
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -ms-filter: blur(5px);
        -o-filter: blur(5px);
        
        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: 100px;
         height: 30px;
         
         color: white;
         text-decoration: none;
         text-align: center;
         line-height: 30px;
         
         border-radius: 5px;
     }
     #reset-button{
        left: 200px;
        bottom: 20px;
        background-color: #085;
     }
     #show-button{
        left: 400px;
        bottom: 20px;
        background-color: #074;
     }
     </style>
</head>
<body>
   <div id='blur-div'>
       <img id='blur-image' src='image.jpg'/>
       <canvas id='canvas'></canvas>
       <a href='javascript:reset()' class='button' id='reset-button'>RESET</a>
       <a href='javascript:show()' class='button' id='show-button'>SHOW</a>
   </div>
  
   <script type='text/javascript'>
      var canvasWidth = 620; //window.innerWidth
      var canvasHeight = 350; //window.innerHeight
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      
      canvas.width = canvasWidth;
      canvas.height = canvasHeight;
      
      var image = new Image();
      var clippingRegion = {x: -1, y: -1, r: 30};
      image.src = 'image.jpg';
      image.onload = function(e){
           initCanvas();
      }
      function initCanvas(){
           clippingRegion = {x: Math.random()*600, y: Math.random()*300, r: 30};
           draw(image, clippingRegion);
      }
      function  setClippingRegion(clippingRegion){
         context.beginPath();
         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();
          setClippingRegion(clippingRegion);
          context.drawImage(image,0,0);
          context.restore();
      }
      function reset(){
        initCanvas();
      }
      function show(){
        var tip = setInterval(function(){
             clippingRegion.r += 20;
             if(clippingRegion.r> Math.max(canvas.width,canvas.height)){
                 clearInterval(tip);
             }
             draw(image, clippingRegion);console.log('hahah');
         },30);
      }
   </script>
</body>
</html>
View Code

（最后效果如上：）

posted @ 2017-01-26 18:01  阿力瓦  阅读(347)  评论(0)    收藏  举报