海安零距离 海安论坛 海安新闻 海安

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1950|回复: 0

如何使用canvas绘制椭圆,扩展非chrome浏览器中的ellipse方法

[复制链接]

6234

主题

6234

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
18716
发表于 2019-12-27 14:30 | 显示全部楼层 |阅读模式
  这篇博文主要针对浏览器中绘制椭圆的方法扩展。在网上搜刮了很多,发现他们绘制椭圆的方式都有缺陷。其中有压缩法,盘算法,贝塞尔曲线法等多种方式。但是都不能很好的绘制出椭圆。全部我就对这个绘制椭圆的方式举行了研究,发现压缩法是可以完美实现椭圆绘制的。废话不多说,直接上代码了。
  1. if (!CanvasRenderingContext2D.prototype.ellipse) {    CanvasRenderingContext2D.prototype.ellipse = function(x, y, radiusX, radiusY, rotation, startAngle, endAngle,        anticlockwise) {        var r = radiusX > radiusY ? radiusX : radiusY; //用打的数为半径        var scaleX = radiusX / r; //盘算缩放的x轴比例        var scaleY = radiusY / r; //盘算缩放的y轴比例        this.save(); //生存副本                            this.translate(x, y); //移动到圆心位置        this.rotate(rotation); //举行旋转        this.scale(scaleX, scaleY); //举行缩放        this.arc(0, 0, r, startAngle, endAngle, anticlockwise); //绘制圆形        this.restore(); //还原副本    }}
复制代码

这里给表明一下别的博文内里中的压缩法为啥禁绝确.下面我抄袭别人一段代码,来解析一下为啥错误.
  1. 1  2  3  4      5     椭圆 6  7  8  9     当前浏览器不支持Canvas,请更换浏览器后再试10 11 35 36
复制代码
他绘制的结果如下

为什么会出现这种环境呢.由于他在绘制的时间先绘制了,然后才还原.如许的话是压缩的一个路径,在绘制的时间就会连线条也举行压缩.而我的那段代码中并没有直接举行绘制.而是举行了还原操纵.下面我给一段示例代码.各人可以直接举行试验.
  1.                     canvas绘制椭圆                           
复制代码

现实结果如下:

由此可见,实在压缩法是完全可以实现椭圆绘制的.只是大部门博文内里使用的都不太对而已.
假如以为我这种方式不是你想要的的,也可以参考:https://www.cnblogs.com/fangsmile/p/9923532.html
假如 你以为我的方式对的话,盼望你能够举行转发.让更多的人知道这种绘制椭圆的方法.谢谢.
原文地点:https://www.cnblogs.com/flybeijing/p/canvas_ellipse.html


免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|深圳论坛-深圳人的网上家园  

GMT+8, 2020-6-6 06:26 , Processed in 0.142874 second(s), 30 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表