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打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
css3实现背景图片拉伸效果像桌面壁纸一样
Aug 19 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 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中目录,文件操作详谈
2007/03/19 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
XmlUtils JS操作XML工具类
2009/10/01 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
python使用百度翻译进行中翻英示例
2014/04/14 Python
浅谈django orm 优化
2018/08/18 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
售后服务承诺书模板
2014/05/21 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
经理助理岗位职责
2015/02/02 职场文书