html5 canvas里繪制橢圓并保持線條粗細均勻的技巧_HTML5教程
      
編輯Tag賺U幣
      




      

      推薦：基于Modernizr 讓網站進行優雅降級的分析
      如今一個網頁展現的內容是越來越豐富，其中不乏一些HTML5、CSS3的功能特效。那么如果客戶端的瀏覽器支持HTML5。頁面訪問效果很好沒有問題。如果不支持HTML5，還是IE6,7,8等瀏覽器的時候呢？這個時候往往是作為一個前段人員非常頭痛的事情了，兼容
      

      Canvas里繪制橢圓是一個很常見的需求，比較新的HTML Canvas 2D Context W3C草案里面新增了ellipse方法繪制橢圓，但是目前大多數瀏覽器還沒有實現該方法，所以需要用arc或者arcTo方法結合scale變形來繪制橢圓。
      

      示例代碼：

      復制代碼 代碼如下:www.wf0088.com

      <canvas width="400" height="300"></canvas>  
      <script>  
      var ctx = documentquerySelector('canvas')getContext('2d');  
      ctxlineWidth = "10";  
      ctxscale(1,2);  
      ctxarc(150,150,100,0,MathPI*2,false);  
      ctxstroke();  
      </script>
      

      有點不對，因為線條粗細不均勻了，stroke也被scale影響了。

      要修正這個問題，就要一點點小技巧了。
      

      示例代碼：

      復制代碼 代碼如下:www.wf0088.com

      [code]
      <canvas width="400" height="300"></canvas>  
      <script>  
      var ctx = documentquerySelector('canvas')getContext('2d');  
      ctxlineWidth = "10";  
      ctxsave();  
      ctxscale(1,2);  
      ctxarc(150,150,100,0,MathPI*2,false);  
      ctxrestore();  
      ctxstroke();  
      </script>  

      [/code]
      

      現在均勻了，非常完美。

      技巧就在先save保存畫布狀態，然后縮放、調用路徑指令，再restore恢復畫布狀態，再stroke繪制出來。
      

      關鍵點是先save后縮放，先restore后stroke.

      

            
      分享：HTML5之WebGL 3D概述(上)—WebGL原生開發開啟網頁3D渲染新時代
      WebGL開啟了網頁3D渲染的新時代，它允許在canvas中直接渲染3D的內容，而不借助任何插件,看到此處是不是感覺特別驚訝啊，WebGL有一個很好的中文教程，就是下面使用參考中的第一個鏈接，所以這里不再班門弄斧，后面的內容只是簡單的總結一下學習的內容,感興趣的朋友可以了
      


      

      



      


      來源：未知//所屬分類：HTML5教程/更新時間：2013-04-22


      

      



      


      



      相關HTML5教程：