html5 canvas里繪制橢圓并保持線條粗細均勻的技巧_HTML5教程
推薦：基于Modernizr 讓網站進行優(yōu)雅降級的分析如今一個網頁展現(xiàn)的內容是越來越豐富，其中不乏一些HTML5、CSS3的功能特效。那么如果客戶端的瀏覽器支持HTML5。頁面訪問效果很好沒有問題。如果不支持HTML5，還是IE6,7,8等瀏覽器的時候呢？這個時候往往是作為一個前段人員非常頭痛的事情了，兼容
Canvas里繪制橢圓是一個很常見的需求，比較新的HTML Canvas 2D Context W3C草案里面新增了ellipse方法繪制橢圓，但是目前大多數(shù)瀏覽器還沒有實現(xiàn)該方法，所以需要用arc或者arcTo方法結合scale變形來繪制橢圓。
示例代碼：
復制代碼 代碼如下:hl5o.cn
<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影響了。
要修正這個問題，就要一點點小技巧了。
示例代碼：
復制代碼 代碼如下:hl5o.cn
[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]
現(xiàn)在均勻了，非常完美。
技巧就在先save保存畫布狀態(tài)，然后縮放、調用路徑指令，再restore恢復畫布狀態(tài)，再stroke繪制出來。
關鍵點是先save后縮放，先restore后stroke.
分享：HTML5之WebGL 3D概述(上)—WebGL原生開發(fā)開啟網頁3D渲染新時代WebGL開啟了網頁3D渲染的新時代，它允許在canvas中直接渲染3D的內容，而不借助任何插件,看到此處是不是感覺特別驚訝啊，WebGL有一個很好的中文教程，就是下面使用參考中的第一個鏈接，所以這里不再班門弄斧，后面的內容只是簡單的總結一下學習的內容,感興趣的朋友可以了
相關HTML5教程：
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網易微博Web App用HTML5開發(fā)的過程介紹
- HTML5 對各個標簽的定義與規(guī)定：body的介紹
- 關于HTML5的安全問題開發(fā)人員需要牢記的
- 關于HTML5的22個初級技巧(圖文教程)
- 開發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫的SQL語句的使用方法
- HTML5實踐-圖片設置成灰度圖
- HTML5安全介紹之內容安全策略（CSP）簡介
- HTML5 Web存儲方式的localStorage和sessionStorage進行數(shù)據(jù)本地存儲案例應用
- Bootstrap 學習分享
- input元素的url類型和email類型簡介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- HTML5 Web Database 數(shù)據(jù)庫的SQL語句的使用方法
- html5指南-4.使用Geolocation實現(xiàn)定位功能
- 利用HTML5中Geolocation獲取地理位置調用Google Map API在Google Map上定位
- html5 canvas-1.canvas介紹(hello canvas)
- HTML4和HTML5之間除了相似以外的10個主要不同
- html5播放視頻且動態(tài)截圖實現(xiàn)步驟與代碼(支持safari其他未測試)
- HTML5 語音搜索只需一句代碼
- html5中地理位置定位api接口開發(fā)應用小結
- 純html5+css3下拉導航菜單實現(xiàn)代碼
- HTML5之SVG 2D入門7—SVG元素的重用與引用
- 相關鏈接：
- 教程說明：
HTML5教程-html5 canvas里繪制橢圓并保持線條粗細均勻的技巧
。