相信大家對于Canvas畫圓都不陌生
- oGC.arc(400, 300, 100, 0, 2*Math.PI, false);
如上所示，直接調用API就可以了，但是計算機內部卻是使用光柵學，利用bresenham算法畫圓的，這個我們放到最后來說，先說說利用圓的參數方程畫圓
- circle(oGC, 400, 300, 100);
- function circle(context, x, y, a) { // x,y是坐標;a是半徑
- var r = 1/a; // ①注意：此處r可以寫死，不過不同情況下寫死的值不同
- context.beginPath();
- context.moveTo(x + a, y);
- for(var i = 0; i < 2 * Math.PI; i += r) {
- context.lineTo(x + a * Math.cos(i), y + a * Math.sin(i));
- }
- context.closePath();
- context.fill();
- }
原理是什么，相信三角函數不錯的童鞋理解起來很容易的，如果不知道的話，注意注釋①，我變化一下r的值，相信就立竿見影了~
r和2*Math.PI配合就是圓的精細程度，在半徑為100的時候，r取1/10就可以了，通用的話可以寫死，寫成r = 1 / a;這樣無論半徑取大或者小，圓都會很精細，但是性能會有很大影響
現在來看看文章的主角，針對圓來看橢圓的
- function EllipseOne(context, x, y, a, b) {
- var step = (a > b) ? 1 / a : 1 / b;
- context.beginPath();
- context.moveTo(x + a, y);
- for(var i = 0; i < 2 * Math.PI; i += step) {
- context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
- }
- context.closePath();
- context.fill();
- }
和圓基本一樣，不過圓只有一個半徑，而橢圓分為長軸和短軸了。
看下效果~
好了，畫橢圓成功，文章結束~
怎么可能!
就這樣結束也太沒品了，剛剛是方法一，下面來看其他的
方法二，均勻壓縮法
這是我最喜歡的方法，易理解，相比較方法一，性能也快了很多，先貼代碼~
- function EllipseTwo(context, x, y, a, b) {
- context.save();
- var r = (a > b) ? a : b;
- var ratioX = a / r;
- var ratioY = b / r;
- context.scale(ratioX, ratioY);
- context.beginPath();
- context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI, false);
- context.closePath();
- context.restore();
- context.fill();
- }
原理是利用了scale來對一個標準的圓進行壓縮，ratioX是橫軸縮放比率，ratioY是縱軸縮放比率，就因為這兩個值不同，使得將標準圓縮放成了一個橢圓
記得save()和restore()還原context環境，so easy理解的方法
下面兩種方法很高大上，都是利用三次貝塞爾曲線法
方法三，四，貝塞爾法
- function EllipseThree(context, x, y, a, b) {
- var ox = 0.5 * a,
- oy = 0.6 * b;
- context.save();
- context.translate(x, y);
- context.beginPath();
- context.moveTo(0, b);
- context.bezierCurveTo(ox, b, a, oy, a, 0);
- context.bezierCurveTo(a, -oy, ox, -b, 0, -b);
- context.bezierCurveTo(-ox, -b, -a, -oy, -a, 0);
- context.bezierCurveTo(-a, oy, -ox, b, 0, b);
- context.closePath();
- context.fill();
- context.restore();
- }
- function EllipseFour(context, x, y, a, b) {
- var k = 0.5522848,
- ox = k * a,
- oy = k * b;
- context.translate(x, y);
- context.beginPath();
- context.moveTo(-a, 0);
- context.bezierCurveTo(-a, oy, -ox, -b, 0, -b);
- context.bezierCurveTo(ox, -b, a, -oy, a, 0);
- context.bezierCurveTo(a, oy, ox, b, 0, b);
- context.bezierCurveTo(-ox, b, -a, oy, -a, 0);
- context.closePath();
- context.fill();
- }
貝塞爾法的核心在于兩個控制點的選取，但是它有致命的問題，當lineWidth較寬的時候，橢圓較扁，長軸較尖銳，會出現不平滑的情況
如果不知道什么事貝塞爾的話就自行百度……這個不解釋了……
后面還有最后一種光柵法畫橢圓，光柵法畫圓很簡單，畫橢圓挺麻煩的，下面是最簡單的一種橢圓畫法，等于是lineWidth為1px的情況下
- function EllipseFive(context, x, y, a, b) {
- var data = context.getImageData(0, 0, 800, 600);
- var imageData = data.data;
- var tx = 0;
- var ty = b;
- var d = b*b + a*a*(-b + 0.25);
- var mx = a * a / Math.sqrt(a * a + b * b);
- while(tx <= mx) {
- if(d < 0) {
- d += b * b * (2 * tx + 3);
- } else {
- ty--;
- d += b * b * (2 * tx + 3) + 2 * a * a * (1 - ty);
-
- }
- tx++;
- setPix(x + tx, y + ty);
- setPix(x + tx, y - ty);
- setPix(x - tx, y + ty);
- setPix(x - tx, y - ty);
- }
- d = b * b * (tx + 0.5) * (tx + 0.5) + a * a * (ty - 1) * (ty - 1) - a * a * b * b;
- while (ty > 0) {
- if (d < 0) {
- tx++;
- d += b*b*(2 * tx + 2) + a*a*(-2 * ty + 3);
- }
- else {
- d += a*a*(-2 * ty + 3);
- }
- ty--;
- setPix(x + tx, y + ty);
- setPix(x - tx, y + ty);
- setPix(x + tx, y - ty);
- setPix(x - tx, y - ty);
- }
- context.putImageData(data, 0, 0);
- function setPix(x, y){
- console.log(x, y);
- var index = getStartIndex(x, y);
- for(var i = 0; i< 4; i++) {
- if(i == 3) {
- imageData[index + i] = 255;
- }
- else{
- imageData[index + i] = 128;
- }
- }
- }
- function getStartIndex(x, y) {
- return y * 800 * 4 + x * 4;
- }
- }
給個結果圖~
光柵法的原理在這里就不說啦，那個說的話篇幅很大，在這里也不推薦用光柵法去畫橢圓，針對不同線寬很麻煩
ok這篇文章就到這啦，Thanks~
原創文章轉載請注明：轉載自AlloyTeam：http://www.alloyteam.com/2015/07/canvas-hua-tuo-yuan-di-fang-fa/
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。