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动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
Nov 05 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
css3实例教程 一款纯css3实现的环形导航菜单
Oct 20 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
HTML高亮关键字的实现代码
Oct 22 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 HTML / CSS
HTML5制作表格样式
Nov 15 HTML / CSS
用CSS3画一个爱心
Apr 27 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/07/04 PHP
php查看当前Session的ID实例
2015/03/16 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
php unlink()函数使用教程
2018/07/12 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
javascript奇异的arguments分析
2010/10/20 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
一览画面点击复选框后获取多个id值的方法
2016/05/30 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
学python需要去培训机构吗
2020/07/01 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
五年级科学教学反思
2014/02/05 职场文书
学生手册家长评语
2014/02/10 职场文书
公司老总年会致辞
2015/07/30 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
Python制作表白爱心合集
2022/01/22 Python
使用Python拟合函数曲线
2022/04/14 Python