Canvas画椭圆的方法

时间：2016-03-08
　　虽然标题是画椭圆，但是我们先来说说Canvas中的圆

　　相信大家对于Canvas画圆都不陌生
  1. oGC.arc(400, 300, 100, 0, 2*Math.PI, false);
复制代码

　　如上所示，直接调用API就可以了，但是计算机内部却是使用光栅学，利用bresenham算法画圆的，这个我们放到最后来说，先说说利用圆的参数方程画圆
  1. circle(oGC, 400, 300, 100);
  2. function circle(context, x, y, a) { // x,y是坐标;a是半径
  3.     var r = 1/a; // ①注意：此处r可以写死，不过不同情况下写死的值不同
  4.     context.beginPath();
  5.     context.moveTo(x + a, y);
  6.     for(var i = 0; i < 2 * Math.PI; i += r) {
  7.         context.lineTo(x + a * Math.cos(i), y + a * Math.sin(i));
  8.     }
  9.     context.closePath();
  10.     context.fill();
  11. }
复制代码

　　原理是什么，相信三角函数不错的童鞋理解起来很容易的，如果不知道的话，注意注释①，我变化一下r的值，相信就立竿见影了~

1.jpg

2.jpg

3.jpg

4.jpg

　　r和2*Math.PI配合就是圆的精细程度，在半径为100的时候，r取1/10就可以了，通用的话可以写死，写成r = 1 / a;这样无论半径取大或者小，圆都会很精细，但是性能会有很大影响

　　现在来看看文章的主角，针对圆来看椭圆的
  1. function EllipseOne(context, x, y, a, b) {
  2.     var step = (a > b) ? 1 / a : 1 / b;
  3.     context.beginPath();
  4.     context.moveTo(x + a, y);
  5.     for(var i = 0; i < 2 * Math.PI; i += step) {
  6.         context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
  7.     }
  8.     context.closePath();
  9.     context.fill();
  10. }
复制代码

　　和圆基本一样，不过圆只有一个半径，而椭圆分为长轴和短轴了。

　　看下效果~

5.jpg

　　好了，画椭圆成功，文章结束~

　　怎么可能!

　　就这样结束也太没品了，刚刚是方法一，下面来看其他的

　　方法二，均匀压缩法

　　这是我最喜欢的方法，易理解，相比较方法一，性能也快了很多，先贴代码~
  1. function EllipseTwo(context, x, y, a, b) {
  2.     context.save();
  3.     var r = (a > b) ? a : b;
  4.     var ratioX = a / r;
  5.     var ratioY = b / r;
  6.     context.scale(ratioX, ratioY);
  7.     context.beginPath();
  8.     context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI, false);
  9.     context.closePath();
  10.     context.restore();
  11.     context.fill();
  12. }
复制代码

　　原理是利用了scale来对一个标准的圆进行压缩，ratioX是横轴缩放比率，ratioY是纵轴缩放比率，就因为这两个值不同，使得将标准圆缩放成了一个椭圆

　　记得save()和restore()还原context环境，so easy理解的方法

　　下面两种方法很高大上，都是利用三次贝塞尔曲线法

　　方法三，四，贝塞尔法
  1. function EllipseThree(context, x, y, a, b) {
  2.     var ox = 0.5 * a,
  3.         oy = 0.6 * b;

  5.     context.save();
  6.     context.translate(x, y);
  7.     context.beginPath();
  8.     context.moveTo(0, b);
  9.     context.bezierCurveTo(ox, b, a, oy, a, 0);
  10.     context.bezierCurveTo(a, -oy, ox, -b, 0, -b);
  11.     context.bezierCurveTo(-ox, -b, -a, -oy, -a, 0);
  12.     context.bezierCurveTo(-a, oy, -ox, b, 0, b);
  13.     context.closePath();
  14.     context.fill();
  15.     context.restore();
  16. }

  18. function EllipseFour(context, x, y, a, b) {
  19.     var k = 0.5522848,
  20.     ox = k * a,
  21.     oy = k * b;

  23.     context.translate(x, y);
  24.     context.beginPath();
  25.     context.moveTo(-a, 0);
  26.     context.bezierCurveTo(-a, oy, -ox, -b, 0, -b);
  27.     context.bezierCurveTo(ox, -b, a, -oy, a, 0);
  28.     context.bezierCurveTo(a, oy, ox, b, 0, b);
  29.     context.bezierCurveTo(-ox, b, -a, oy, -a, 0);
  30.     context.closePath();
  31.     context.fill();
  32. }
复制代码

　　贝塞尔法的核心在于两个控制点的选取，但是它有致命的问题，当lineWidth较宽的时候，椭圆较扁，长轴较尖锐，会出现不平滑的情况

　　如果不知道什么事贝塞尔的话就自行百度……这个不解释了……

　　后面还有最后一种光栅法画椭圆，光栅法画圆很简单，画椭圆挺麻烦的，下面是最简单的一种椭圆画法，等于是lineWidth为1px的情况下
  1. function EllipseFive(context, x, y, a, b) {
  2.     var data = context.getImageData(0, 0, 800, 600);
  3.     var imageData = data.data;
  4.     var tx = 0;
  5.     var ty = b;
  6.     var d = b*b + a*a*(-b + 0.25);
  7.     var mx = a * a / Math.sqrt(a * a + b * b);

  9.     while(tx <= mx) {
  10.         if(d < 0) {
  11.             d += b * b * (2 * tx + 3);
  12.         } else {
  13.             ty--;
  14.             d += b * b * (2 * tx + 3) + 2 * a * a * (1 - ty);
  15.             
  16.         }

  18.         tx++;
  19.         setPix(x + tx, y + ty);
  20.         setPix(x + tx, y - ty);
  21.         setPix(x - tx, y + ty);
  22.         setPix(x - tx, y - ty);
  23.     }

  25.     d = b * b * (tx + 0.5) * (tx + 0.5) + a * a * (ty - 1) * (ty - 1) - a * a * b * b;
  26.     while (ty > 0) {
  27.         if (d < 0) {
  28.             tx++;
  29.             d += b*b*(2 * tx + 2) + a*a*(-2 * ty + 3);
  30.         }
  31.         else {
  32.             d += a*a*(-2 * ty + 3);
  33.         }
  34.         ty--;
  35.         setPix(x + tx, y + ty);
  36.         setPix(x - tx, y + ty);
  37.         setPix(x + tx, y - ty);
  38.         setPix(x - tx, y - ty);
  39.     }

  41.     context.putImageData(data, 0, 0);

  43.     function setPix(x, y){
  44.         console.log(x, y);
  45.         var index = getStartIndex(x, y);
  46.         for(var i = 0; i< 4; i++) {
  47.             if(i == 3) {
  48.                 imageData[index + i] = 255;
  49.             }
  50.             else{
  51.                 imageData[index + i] = 128;
  52.             }
  53.         }
  54.     }

  56.     function getStartIndex(x, y) {
  57.         return y * 800 * 4 + x * 4;
  58.     }
  59. }
复制代码

　　给个结果图~

6.jpg

　　光栅法的原理在这里就不说啦，那个说的话篇幅很大，在这里也不推荐用光栅法去画椭圆，针对不同线宽很麻烦

　　ok这篇文章就到这啦，Thanks~

　　原创文章转载请注明：转载自AlloyTeam：http://www.alloyteam.com/2015/07/canvas-hua-tuo-yuan-di-fang-fa/

上一篇：24个 HTML5 & CSS3 下拉菜单制作教程 下一篇：HTML5 CANVAS：绘图状态和状态栈

相关文章

最新文章

Copyright © 2022-2023 HTML5模板网 版权所有并保留所有权