Heim Web-Frontend H5-Tutorial Canvas画椭圆的方法

Canvas画椭圆的方法

May 17, 2016 am 09:07 AM

  虽然标题是画椭圆,但是我们先来说说Canvas中的圆

  相信大家对于Canvas画圆都不陌生

oGC.arc(400, 300, 100, 0, 2*Math.PI, false);
复制代码
Nach dem Login kopieren


  如上所示,直接调用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();
}
复制代码
Nach dem Login kopieren


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

1073.png


1074.png


1075.png


1076.png


  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();
}
复制代码
Nach dem Login kopieren


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

  看下效果~

1077.png


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

  怎么可能!

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

  方法二,均匀压缩法

  这是我最喜欢的方法,易理解,相比较方法一,性能也快了很多,先贴代码~

  1. 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();
    }
    Nach dem Login kopieren
复制代码


  原理是利用了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();
}
复制代码
Nach dem Login kopieren
  贝塞尔法的核心在于两个控制点的选取,但是它有致命的问题,当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;
    }
}
复制代码
Nach dem Login kopieren


  给个结果图~

1078.png


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

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

以上就是Canvas画椭圆的方法的内容,更多相关内容请关注PHP中文网(www.php.cn)!


Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Welche Schulen verwenden Leinwand? Welche Schulen verwenden Leinwand? Aug 18, 2023 pm 05:59 PM

Zu den Schulen, die Leinwand verwenden, gehören die Stanford University, das MIT, die Columbia University, die University of California, Berkeley usw. Ausführliche Einführung: 1. Die Stanford University nutzt Canvas als ihre wichtigste Online-Lernplattform. Lehrer und Studenten der Stanford University nutzen Canvas, um Kursinhalte zu verwalten und zu kommunizieren und durch Funktionen wie Online-Diskussionen, Abgabe von Aufgaben und Prüfungen zu lernen Das Polytechnic Institute und das MIT nutzen Canvas ebenfalls als Online-Lernmanagementsystem und führen die Kursverwaltung über die Canvas-Plattform durch. 3. Columbia University usw.

Was sind die Canvas-Pfeil-Plug-ins? Was sind die Canvas-Pfeil-Plug-ins? Aug 21, 2023 pm 02:14 PM

Zu den Canvas-Pfeil-Plugins gehören: 1. Fabric.js, das über eine einfache und benutzerfreundliche API verfügt und benutzerdefinierte Pfeileffekte erstellen kann. 2. Konva.js, das die Funktion zum Zeichnen von Pfeilen bietet und verschiedene Pfeile erstellen kann 3. Pixi.js, das umfangreiche Grafikverarbeitungsfunktionen bietet und verschiedene Pfeileffekte erzielen kann; 4. Two.js, das auf einfache Weise Pfeilstile und Animationen erstellen und steuern kann; 6. Grobe .js, Sie können handgezeichnete Pfeile usw. erstellen.

Was sind die Details der Leinwanduhr? Was sind die Details der Leinwanduhr? Aug 21, 2023 pm 05:07 PM

Zu den Details der Leinwanduhr gehören das Aussehen der Uhr, Teilstriche, Digitaluhr, Stunden-, Minuten- und Sekundenzeiger, Mittelpunkt, Animationseffekte, andere Stile usw. Ausführliche Einführung: 1. Erscheinungsbild der Uhr: Sie können mit Canvas ein kreisförmiges Zifferblatt als Erscheinungsbild der Uhr zeichnen und die Größe, Farbe, den Rand und andere Stile des Zifferblatts festlegen. 2. Skalenlinien: Zeichnen Sie Skalenlinien ein 3. Digitaluhr: Sie können eine Digitaluhr auf das Zifferblatt zeichnen, um die aktuelle Stunde und Minute anzuzeigen.

Lernen Sie das Canvas-Framework kennen und erklären Sie das häufig verwendete Canvas-Framework im Detail Lernen Sie das Canvas-Framework kennen und erklären Sie das häufig verwendete Canvas-Framework im Detail Jan 17, 2024 am 11:03 AM

Entdecken Sie das Canvas-Framework: Um die häufig verwendeten Canvas-Frameworks zu verstehen, sind spezifische Codebeispiele erforderlich. Einführung: Canvas ist eine in HTML5 bereitgestellte Zeichen-API, mit der wir umfangreiche Grafik- und Animationseffekte erzielen können. Um die Effizienz und den Komfort des Zeichnens zu verbessern, haben viele Entwickler verschiedene Canvas-Frameworks entwickelt. In diesem Artikel werden einige häufig verwendete Canvas-Frameworks vorgestellt und spezifische Codebeispiele bereitgestellt, um den Lesern ein tieferes Verständnis für die Verwendung dieser Frameworks zu vermitteln. 1. EaselJS-Framework Ea

Welche Versionen von html2canvas gibt es? Welche Versionen von html2canvas gibt es? Aug 22, 2023 pm 05:58 PM

Zu den Versionen von html2canvas gehören html2canvas v0.x, html2canvas v1.x usw. Detaillierte Einführung: 1. html2canvas v0.x, eine frühe Version von html2canvas. Die neueste stabile Version ist v0.5.0-alpha1. Es handelt sich um eine ausgereifte Version, die in vielen Projekten weit verbreitet und verifiziert wurde. 2. html2canvas v1.x, dies ist eine neue Version von html2canvas.

uniapp implementiert die Verwendung von Canvas zum Zeichnen von Diagrammen und Animationseffekten uniapp implementiert die Verwendung von Canvas zum Zeichnen von Diagrammen und Animationseffekten Oct 18, 2023 am 10:42 AM

Für die Verwendung von Canvas zum Zeichnen von Diagrammen und Animationseffekten in Uniapp sind bestimmte Codebeispiele erforderlich. 1. Einführung Mit der Beliebtheit mobiler Geräte müssen immer mehr Anwendungen verschiedene Diagramme und Animationseffekte auf dem mobilen Endgerät anzeigen. Als plattformübergreifendes Entwicklungsframework auf Basis von Vue.js bietet uniapp die Möglichkeit, Canvas zum Zeichnen von Diagrammen und Animationseffekten zu verwenden. In diesem Artikel wird vorgestellt, wie Uniapp Canvas verwendet, um Diagramm- und Animationseffekte zu erzielen, und es werden spezifische Codebeispiele gegeben. 2. Leinwand

Welche Eigenschaften hat Tkinter Canvas? Welche Eigenschaften hat Tkinter Canvas? Aug 21, 2023 pm 05:46 PM

Zu den Tkinter-Canvas-Attributen gehören BG, BD, Relief, Breite, Höhe, Cursor, Highlightbackground, Highlightcolor, Highlightthickness, Insertbackground, Insertwidth, Selectbackground, Selectforeground, XScrollcommand-Attribute usw. Ausführliche Einführung

Entdecken Sie die wichtige Rolle und Anwendung von Canvas in der Spieleentwicklung Entdecken Sie die wichtige Rolle und Anwendung von Canvas in der Spieleentwicklung Jan 17, 2024 am 11:00 AM

Verstehen Sie die Leistungsfähigkeit und Anwendung von Canvas in der Spieleentwicklung. Überblick: Mit der rasanten Entwicklung der Internettechnologie werden Webspiele bei Spielern immer beliebter. Als wichtiger Bestandteil der Webspielentwicklung hat sich die Canvas-Technologie nach und nach in der Spieleentwicklung durchgesetzt und ihre leistungsstarke Leistungsfähigkeit und Anwendung unter Beweis gestellt. In diesem Artikel wird das Potenzial von Canvas in der Spieleentwicklung vorgestellt und seine Anwendung anhand spezifischer Codebeispiele demonstriert. 1. Einführung in die Canvas-Technologie Canvas ist ein neues Element in HTML5, das uns die Verwendung ermöglicht

See all articles