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用@font-face实现自定义英文字体
Sep 23 HTML / CSS
实例教程 一款纯css3实现的数字统计游戏
Nov 10 HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
Jan 21 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 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
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
使用隐藏的new来创建对象
2011/03/29 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
Javascript动画效果(2)
2016/10/11 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
从零学Python之入门(四)运算
2014/05/27 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
工程力学硕士生的自我评价范文
2013/11/16 职场文书
医学专业大学生求职的自我评价
2013/11/27 职场文书
检举信的格式及范文
2014/04/04 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
无私奉献演讲稿
2014/09/04 职场文书
聘任书的格式及模板
2019/10/28 职场文书
基于JavaScript实现省市联动效果
2021/06/22 Javascript
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python