html5 canvas里绘制椭圆并保持线条粗细均匀的技巧


Posted in HTML / CSS onMarch 25, 2013

Canvas里绘制椭圆是一个很常见的需求,比较新的HTML Canvas 2D Context W3C草案里面新增了ellipse方法绘制椭圆,但是目前大多数浏览器还没有实现该方法,所以需要用arc或者arcTo方法结合scale变形来绘制椭圆。

示例代码:

复制代码
代码如下:

<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>
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
有点不对,因为线条粗细不均匀了,stroke也被scale影响了。

要修正这个问题,就要一点点小技巧了。

示例代码:

复制代码
代码如下:

[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] html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
现在均匀了,非常完美。

技巧就在先save保存画布状态,然后缩放、调用路径指令,再restore恢复画布状态,再stroke绘制出来。

关键点是先save后缩放,先restore后stroke.

HTML / CSS 相关文章推荐
CSS3教程(8):CSS3透明度指南
Apr 02 HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
CSS3属性box-sizing使用指南
Dec 09 HTML / CSS
纯css3实现思维导图样式示例
Nov 01 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
May 04 HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 HTML / CSS
css position fixed 左右双定位的实现代码
Apr 29 HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 HTML / CSS
HTML5中的Article和Section元素认识及使用
Mar 22 #HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 #HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 #HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 #HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 #HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
Feb 07 #HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 #HTML / CSS
You might like
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
jquery $.ajax入门应用二
2008/11/19 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
javascript实现日历效果
2019/06/17 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
详解Python的Django框架中的templates设置
2015/05/11 Python
Python实现的字典值比较功能示例
2018/01/08 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
事业单位辞职信范文
2014/01/19 职场文书
工作岗位说明书模板
2014/05/09 职场文书
介绍信范文大全
2015/05/07 职场文书
加强党性修养心得体会
2016/01/21 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书