html5 canvas里绘制椭圆并保持线条粗细均匀的技巧_HTML5教程
推荐：基于Modernizr 让网站进行优雅降级的分析如今一个网页展现的内容是越来越丰富，其中不乏一些HTML5、CSS3的功能特效。那么如果客户端的浏览器支持HTML5。页面访问效果很好没有问题。如果不支持HTML5，还是IE6,7,8等浏览器的时候呢？这个时候往往是作为一个前段人员非常头痛的事情了，兼容
Canvas里绘制椭圆是一个很常见的需求，比较新的HTML Canvas 2D Context W3C草案里面新增了ellipse方法绘制椭圆，但是目前大多数浏览器还没有实现该方法，所以需要用arc或者arcTo方法结合scale变形来绘制椭圆。
示例代码：
复制代码 代码如下:www.mb5u.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.mb5u.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教程：
- 只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
- 网易微博Web App用HTML5开发的过程介绍
- HTML5 对各个标签的定义与规定：body的介绍
- 关于HTML5的安全问题开发人员需要牢记的
- 关于HTML5的22个初级技巧(图文教程)
- 开发人员所需要知道的HTML5性能分析面面观
- HTML5 Web Database 数据库的SQL语句的使用方法
- HTML5实践-图片设置成灰度图
- HTML5安全介绍之内容安全策略（CSP）简介
- HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
- Bootstrap 学习分享
- input元素的url类型和email类型简介
HTML5教程Rss订阅Div+Css教程搜索
HTML5教程推荐
- HTML5 Web Database 数据库的SQL语句的使用方法
- html5指南-4.使用Geolocation实现定位功能
- 利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
- html5 canvas-1.canvas介绍(hello canvas)
- HTML4和HTML5之间除了相似以外的10个主要不同
- html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
- HTML5 语音搜索只需一句代码
- html5中地理位置定位api接口开发应用小结
- 纯html5+css3下拉导航菜单实现代码
- HTML5之SVG 2D入门7—SVG元素的重用与引用
- 相关链接：
- 教程说明：
HTML5教程-html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
。