html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
发布时间:2013-03-25 15:13:42 作者:佚名 我要评论
Canvas里绘制椭圆是一个很常见的需求,但是目前大多数浏览器还没有实现该方法,因此经常会使用arc或者arcTo方法结合scale变形来绘制椭圆,感兴趣的朋友可以了解下,希望可以帮助到你们
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>
有点不对,因为线条粗细不均匀了,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]
现在均匀了,非常完美。
技巧就在先save保存画布状态,然后缩放、调用路径指令,再restore恢复画布状态,再stroke绘制出来。
关键点是先save后缩放,先restore后stroke.
相关文章
- 本文主要介绍了html网页播放多个视频的几种方法,包含iframe标签,VLC插件和一些常见的js插件,具有一定的参考价值,感兴趣的可以了解一下2024-03-04
- 做HTML5的video标签,本身我们有下载功能,由于权限问题,所以本文就来介绍一下HTML5中video标签禁止右键和下载视频的问题解决,具有一定的参考价值,感兴趣的可以了解一下2024-02-28
html5 video标签controlslist的具体使用
HTML5 提供了内置的视频播放控件,其中 video controlslist 是其中一个很有用的属性,本文主要介绍了html5 video标签controlslist的具体使用,具有一定的参考价值,感兴趣2024-02-27- 在html5页面中嵌入视频的时候页面中只显示声音却不显示图像,本文主要介绍了HTML5 video播放有声音无图像的解决方法,具有一定的参考价值,感兴趣的可以了解一下2024-02-21
- 在做html5项目的时候有个需求,就是移动端长按不保存图片,本文就来介绍一下Html5移动端禁止长按保存图片的三种实现方法,具有一定的参考价值,感兴趣的可以了解一下2024-02-20
- 混合开发中遇到一个问题,有些型号的安卓机和ios机型,输入框唤起键盘后,输入框会被键盘遮挡,需要手动滑动才能漏出来,影响用户体验,今天给大家分享HTML5键盘弹起遮挡输2024-01-03
- 本文主要介绍了html5登录玻璃界面特效,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-12-12
- 学习Canvas的时候,打算描绘一个矩形并测试清除画布方法时,但是发现画布渲染不出来,本文就来介绍一下该问题的解决,具有一定的参考价值,感兴趣的可以了解一下2023-12-05
- 实际开发中,小程序和H5往往有很多业务场景需要来回跳转,本文就来介绍一下Html5页面跳转小程序的三种方式,感兴趣的可以了解一下2023-12-04
- HTML5标签是HTML语言的最新版本引入的一些新的标签,这些标签用于定义网页内容的结构和语义,相比于以前的HTML版本,HTML5标签提供了更加语义化的元素,本文就给大家介绍HTM2023-11-07
最新评论