HTML5 Canvas 绘制椭圆与椭圆弧的实现

原创 2016年06月01日 19:00:33
由于HTML Canvas 2D Context标准中并没有直接绘制椭圆与椭圆弧的方法,所以浏览器普遍没有这个方法,不过,Chrome支持ellipse方法,至于从哪个版本开始支持的,我就未查证了。IE11,Edge, Firefox, Safari目前最新版都还不支持。。。


所以,我们需要用JS来实现这个方法。原理就是用已经支持的其它方法来模拟ellipse方法,可以用lineTo, quadraticCurveTo, bezierCurveTo, arcTo, arc等方法来实现。


用lineTo来模拟的话,就是参数方程的形式,计算出椭圆上的点的坐标,逐点用lineTo绘制模拟椭圆。简单粗暴有效。


用quadraticCurveTo, bezierCurveTo是一种近似模拟,用贝塞尔曲线来拟合椭圆或椭圆弧,关键在于计算合适的控制点。有些特定场景下很适合。


用arcTo, arc来实现也比较简单,不需要复杂计算,由于arcTo, arc只提供了绘制正圆弧的功能,要绘制椭圆弧,配合scale变形就可以了。推荐使用该方法。实现代码如下:

if (CanvasRenderingContext2D.prototype.ellipse == undefined) {
  CanvasRenderingContext2D.prototype.ellipse = function(x, y, radiusX, radiusY, rotation, startAngle, endAngle, antiClockwise) {
    this.save();
    this.translate(x, y);
    this.rotate(rotation);
    this.scale(radiusX, radiusY);
    this.arc(0, 0, 1, startAngle, endAngle, antiClockwise);
    this.restore();
  }
}

使用示例:

//
var canvas = document.getElementById("canvas1"),
    ctx = canvas.getContext('2d');
//....
ctx.moveTo(100,200);
ctx.ellipse(300, 200, 100, 60, 0, 0, Math.PI, true);
ctx.stroke();


ellipse方法各参数的含义:

x, 椭圆圆心X坐标

y, 椭圆圆心Y坐标

radiusX, 长半轴长度

radiusY, 长半轴长度

rotation, 椭圆旋转角度 (单位是度不是弧度)

startAngle, 椭圆弧起始角弧度 (单位是弧度不是度!)

endAngle, 椭圆弧结束角弧度 (单位是弧度不是度!)

antiClockwise, 是否是逆时针方向绘制。true表示逆时针方向绘制椭圆弧,false顺时针方向绘制椭圆弧。


至于为什么一个方法内惊现 2 种角度单位,我只能说:前端标准就是这么乱!


Google出品的 canvas-5-polyfill.js 用于增强canvas兼容性,它也给canvas加上了ellipse方法

在HTML5的Canvas上绘制椭圆的几种方法(转)

概述     HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结。各种方法各有优缺,视情况选用。各方法的参数相同: context为Canvas的2D绘图环境对象,x...
  • dragoo1
  • dragoo1
  • 2015-07-28 13:58:26
  • 1000

Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)

1、首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, you need...
  • rhljiayou
  • rhljiayou
  • 2012-01-20 20:02:45
  • 223784

html5 绘制椭圆

最近的项目要使用html5 绘制椭圆,参考网上的例子发现可以使用贝塞尔曲线绘制,不过要绘制四条贝塞尔曲线。 在html5的过程中发现可以使用绘制圆形的方式来绘制椭圆 html5中绘制圆的函数如下:...
  • u012251421
  • u012251421
  • 2015-07-22 14:51:31
  • 1158

canvas画旋转椭圆

要求使用画布变换方法。 效果如下: 代码如下: 旋转椭圆 var canvas = document.querySelector('#canvas'), con...
  • sysuzjz
  • sysuzjz
  • 2016-11-09 23:56:07
  • 947

JS画椭圆

*{ margin:0; padding:0; } .ab{ width:1px; ...
  • u011551941
  • u011551941
  • 2015-05-29 17:33:16
  • 1858

用js编写的一个小方格随椭圆曲线运动的特效例子,非常精典,运行看看吧。。

椭圆曲线 *{ margin:0px;padding:0px; } div{ border:1px solid #111; } .points{ width:1px;heig...
  • nigind
  • nigind
  • 2014-02-17 11:53:36
  • 1380

在HTML5的Canvas上绘制椭圆的几种方法

摘要: 概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结。各种方法各有优缺,视情况选用。各方法的参数相同:context为Canvas的2D绘图环境对象,x为椭...
  • vgqulk27
  • vgqulk27
  • 2013-08-13 10:53:37
  • 376

安卓自定义View进阶-Canvas之绘制基本形状

在上一篇自定义 View 分类与流程中我们了解自定义 View 相关的基本知识,不过,这些东西依旧还是理论,并不能拿来 (zhuang) 用(B), 这一次我们就了解一些能 (zhaung) 用(B)...
  • u013831257
  • u013831257
  • 2016-01-21 16:29:35
  • 10067

html5 canvas 实现小球绕椭圆旋转

测试 var ball_count = 10;//小球的个数 var circle_x = 0;//圆心的X坐标 var circl...
  • czh4869623
  • czh4869623
  • 2014-09-17 14:23:45
  • 2522

Threejs画椭圆

Threejs画椭圆 var material = new THREE.LineBasicMaterial({color:0x000000, opacity:1}); var ellipse =...
  • zl814981463
  • zl814981463
  • 2018-03-12 10:47:43
  • 54
收藏助手
不良信息举报
您举报文章:HTML5 Canvas 绘制椭圆与椭圆弧的实现
举报原因:
原因补充:

(最多只允许输入30个字)