suchen
HeimWeb-FrontendH5-TutorialCanvas画椭圆的方法

Canvas画椭圆的方法

May 17, 2016 am 09:07 AM

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

  相信大家对于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的值,相信就立竿见影了~

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


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

  看下效果~

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


  原理是利用了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;
    }
}
复制代码


  给个结果图~

1078.png


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

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

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


Stellungnahme
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
Die Verbindung zwischen H5 und HTML5: Ähnlichkeiten und UnterschiedeDie Verbindung zwischen H5 und HTML5: Ähnlichkeiten und UnterschiedeApr 24, 2025 am 12:01 AM

H5 und HTML5 sind verschiedene Konzepte: HTML5 ist eine Version von HTML, die neue Elemente und APIs enthält. H5 ist ein Rahmen für mobile Anwendungsentwicklungen, die auf HTML5 basieren. HTML5 pariert und rendert Code über den Browser, während H5 -Anwendungen Container ausführen und über JavaScript mit nativem Code interagieren müssen.

Die Bausteine ​​des H5 -Codes: Schlüsselelemente und deren ZweckDie Bausteine ​​des H5 -Codes: Schlüsselelemente und deren ZweckApr 23, 2025 am 12:09 AM

Zu den wichtigsten Elementen von HTML5 gehören ,,,,,, usw., mit denen moderne Webseiten erstellt werden. 1. Definieren Sie den Kopfinhalt, 2. Zum Navigieren durch den Link, 3. darstellen den Inhalt unabhängiger Artikel, 4. organisieren Sie den Seiteninhalt, 5. Zeigen Sie den Seitenleisteninhalt an, 6. Definieren Sie die Fußzeile. Diese Elemente verbessern die Struktur und Funktionalität der Webseite.

HTML5 und H5: Verständnis der gemeinsamen VerwendungHTML5 und H5: Verständnis der gemeinsamen VerwendungApr 22, 2025 am 12:01 AM

Es gibt keinen Unterschied zwischen HTML5 und H5, der Abkürzung von HTML5. 1.HTML5 ist die fünfte Version von HTML, die die Multimedia- und interaktiven Funktionen von Webseiten verbessert. 2.H5 wird häufig verwendet, um auf HTML5-basierte mobile Webseiten oder -anwendungen zu verweisen, und eignet sich für verschiedene mobile Geräte.

HTML5: Die Bausteine ​​des modernen Webs (H5)HTML5: Die Bausteine ​​des modernen Webs (H5)Apr 21, 2025 am 12:05 AM

HTML5 ist die neueste Version der Hypertext -Markup -Sprache, die von W3C standardisiert wurde. HTML5 führt neue semantische Tags, Multimedia -Support- und Form -Verbesserungen ein, verbessert die Webstruktur, die Benutzererfahrung und die SEO -Effekte. HTML5 führt neue semantische Tags vor, wie z. HTML5 unterstützt Multimedia-Elemente und es sind keine Plug-Ins von Drittanbietern erforderlich, wodurch die Benutzererfahrung und die Ladegeschwindigkeit verbessert werden. HTML5 verbessert die Formfunktionen und führt neue Eingangstypen wie usw. ein, die die Effizienz der Benutzererfahrung und der Form von Formularverifizierung verbessert.

H5 -Code: Sauberes und effizientes HTML5 schreibenH5 -Code: Sauberes und effizientes HTML5 schreibenApr 20, 2025 am 12:06 AM

Wie schreibe ich sauberen und effizienten HTML5 -Code? Die Antwort besteht darin, häufige Fehler zu vermeiden, indem Tags, strukturierte Code, Leistungsoptimierung und die Vermeidung häufiger Fehler vermieden werden. 1. Verwenden Sie semantische Tags wie usw., um die Code -Lesbarkeit und SEO -Effekt zu verbessern. 2. Halten Sie den Code strukturiert und lesbar, wobei entsprechende Eindrücke und Kommentare verwendet werden. 3. Optimieren Sie die Leistung, indem Sie unnötige Tags reduzieren, CDN- und Komprimierungscode. V.

H5: Wie es die Benutzererfahrung im Web verbessertH5: Wie es die Benutzererfahrung im Web verbessertApr 19, 2025 am 12:08 AM

H5 verbessert die Erfahrung des Webbenutzers mit Multimedia -Support, Offline -Speicher und Leistungsoptimierung. 1) Multimedia -Unterstützung: H5 und Elemente vereinfachen die Entwicklung und verbessern die Benutzererfahrung. 2) Offline -Speicher: Webstorage und IndexedDB ermöglichen die Verstärkung der Erfahrung offline. 3) Leistungsoptimierung: Webworker und Elemente optimieren die Leistung, um den Bandbreitenverbrauch zu verringern.

Dekonstruieren von H5 -Code: Tags, Elemente und AttributeDekonstruieren von H5 -Code: Tags, Elemente und AttributeApr 18, 2025 am 12:06 AM

Der HTML5 -Code besteht aus Tags, Elementen und Attributen: 1. Das Tag definiert den Inhaltstyp und ist von Winkelklammern umgeben, wie z. 2. Elemente bestehen aus Start -Tags, Inhalten und End -Tags wie Inhalten. 3. Attribute definieren Schlüsselwertpaare im Start-Tag und verbessern Funktionen, z. B.. Dies sind die grundlegenden Einheiten zum Aufbau von Webstruktur.

H5 -Code verstehen: Die Grundlagen von HTML5H5 -Code verstehen: Die Grundlagen von HTML5Apr 17, 2025 am 12:08 AM

HTML5 ist eine Schlüsseltechnologie zum Aufbau moderner Webseiten und bietet viele neue Elemente und Funktionen. 1. HTML5 führt semantische Elemente wie usw. ein, die die Webseitenstruktur und die SEO verbessern. 2. Support Multimedia-Elemente und Einbetten von Medien ohne Plug-Ins. 3. Formulare verbessern neue Eingangstypen und Überprüfungseigenschaften und vereinfachen Sie den Überprüfungsprozess. 4. Bieten Sie Offline- und lokale Speicherfunktionen an, um die Leistung der Webseiten und die Benutzererfahrung zu verbessern.

See all articles

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

SecLists

SecLists

SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software

SublimeText3 Englische Version

SublimeText3 Englische Version

Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!

EditPlus chinesische Crack-Version

EditPlus chinesische Crack-Version

Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion