canvas打造QQ空間低俗廣告

在QQ空間中，咱們最近常常能夠看到某州學院的廣告，當你滑下去時，會有一個圓形蒙版出現，而且會隨着手指的滑動而變大或者變小。

依賴技術

這裏的主要實現是利用canvas的2D繪圖能力，會主要講解drawImage與clip兩個API的做用與原理。

效果

實現過程

1. canvas繪製的準備

   ​ 在網上有不少的canvas的基礎教程，這裏不作過多講解。直接Ctrl+c Ctrl+v

   <div class="view" id="bb">//用來作背景層的顯示
       <canvas id="canvas" ></canvas>
   </div>複製代碼

   ​ 背景的圖層顯示使用css顯示，由於背景層不須要重繪，因此使用css來顯示，減小canvas的渲染調用。

2. 初始化咱們的畫布

   var canvas = document.getElementById("cas"), 
   ctx = canvas.getContext("2d");
   canvas.width = 800;//設置畫布的寬
   canvas.height = 600;//設置畫布的高複製代碼

   ​ 在這裏有人在設置畫布的時候會習慣性使用px來做爲寬高的單位，而後發現屁效果都沒了，若是想使用px做爲單位，則須要對寬高的設置方法進行調整。canvas.style.width=600+'px'

3. 設置蒙版層

   ​

   function Circle(x,y,r,msk=new Image()) {
           this.x=x;   
           this.y=y;
           this.r=r;
           this.ctx={};
           this.msk=msk;
       }
       Circle.prototype.render = function(cxt) {
           this.ctx=ctx;
           ctx.save();
           ctx.beginPath();
           ctx.arc(this.x,this.y,this.r,0,Math.PI*2);
           ctx.closePath();
           ctx.clearRect(0,0,canvas.width,canvas.height);
           ctx.clip();
           ctx.drawImage(this.msk,0,0);
           ctx.restore();
           
       };
       Circle.prototype.big = function() {
           //蒙版變大，每次r++
           this.r++;
           this.render(this.ctx);
       };
       Circle.prototype.small = function() {
           //蒙版變小，每次r--
           if(this.r>0){
               this.r--;
           }else{
   ​
           }
           this.render(this.ctx);
           
       };複製代碼

   這裏我定義了一個圓形蒙版層的類，而且給了它渲染以及變大/小的方法，這裏的主要邏輯是以下。

   ctx.beginPath();
       ctx.arc(this.x,this.y,this.r,0,Math.PI*2);
       ctx.closePath();
       //閉合圓形路徑選取區
       ctx.clip();
       //生成剪裁選取
       ctx.drawImage(this.msk,0,0);
       //將蒙版層進行繪製複製代碼

   ​ clip在canvas是裏用做剪裁的小工具，能夠將以前繪製的路徑區生成選取，而且將後來的圖層看成蒙版層來作剪裁。

   ​ 在以上的代碼中，我使用了save與restore這兩個小東西，相信在不少canvas的開發中都會見到，百度也能知道是爲了存儲畫布上下文的繪製環境與還原，那麼爲何咱們即便相同的繪製狀況下也要使用它們呢。這涉及到canvas的繪製原理問題，這裏不作過多介紹，後面會專門講解。

4. 萬惡之源

   ​

   ​ 當咱們的蒙版層加載完畢後，一切都將開始運行。

   var cir;
   const img=new Image();
   img.src='pic2.jpg';
   img.onload=function(){
   canvas.addEventListener('click',function(e){
       //將鼠標的點擊座標座標轉換成canvas座標
       var x= e.x-canvas.getBoundingClientRect().left;
       var y= e.y-canvas.getBoundingClientRect().top;
       //生成蒙版  渲染蒙版
       cir= new Circle(x,y,200,img);
       cir.render(ctx);
       //開始動起來
       requestAnimFrame(scal);
   })
   }
   ​
   function scal() {
       //變大吧 萌版
       cir.big();
       requestAnimFrame(scal);
   }
   ​
      window.requestAnimFrame = (function(){
   ​
        return  window.requestAnimationFrame       ||
   ​
                window.webkitRequestAnimationFrame ||
   ​
                window.mozRequestAnimationFrame    ||
   ​
                function( callback ){
   ​
                  window.setTimeout(callback, 1000 / 60);
   ​
                };
   ​
      })();
   ​複製代碼

開坑說明

不按期更新canvas與svg的相關技術教程，有實戰型，也會有主原理型的，2d 2.5d 3d都會包含到，同時涉及的有 線性代數 物理 圖形學等相關的基礎知識。我會盡力把這一系列內容作好。

歡迎諸位客官收藏關注 打賞投硬幣！！！  

本處源碼:https://github.com/dxiaoqi/canvas-svg-/tree/master/canvas/clip%E6%95%88%E6%9E%9C