js canvas realisiert Bilder mit abgerundeten Ecken

In diesem Artikel wird der spezifische Code von JS Canvas zum Erreichen abgerundeter Ecken zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Codeimplementierung von Bildern mit abgerundeten Ecken:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
</Kopf>
<body style="Hintergrund: rgba(199,237,204,1)">
 
<div style="Anzeige:flex; Flex-Richtung: Zeile">
 
    <!-- Das Festlegen der Breite und Höhe der Leinwand über den Stil führt dazu, dass der gezeichnete Inhalt in Firefox vertikal gestreckt wird. . . -->
    <canvas id="drawing" width="400px" height="400px">Leinwand zum Zeichnen</canvas>
 
    <pre id="Container" style="Rand: 10px"/>
 
    <img src=//img.jbzj.com/file_images/article/202109/202191115608734.jpg>
</div>
</body>
<Skripttyp="text/javascript">
 
    window.onload = Funktion () {
        var Zeichnung = document.getElementById('Zeichnung');
 
        wenn (Zeichnung.getContext) {
            drucken('Unterstützung')
            Fügt eine RoundRectFunc-Funktion hinzu.
            var Kontext = Zeichnung.getContext('2d');
            zeichnen(Kontext);
 
        } anders {
            drucken('nicht ')
        }
    }
 
 
    Funktion zeichnen(Kontext) {
        Kontext.Füllstil = "rot";
 
        var Bild = Dokument.Bilder[0];
 
        Kontext.roundRect(0,0,Bild.Breite/2,Bild.Höhe/2,30,true)
 
        Kontext.globalCompositeOperation='Quelle-in';
        context.drawImage(Bild, 0, 0, Bildbreite / 2, Bildhöhe / 2)
        // zuBild();
 
    }
 
    Funktion addRoundRectFunc() {
        CanvasRenderingContext2D.prototype.roundRect =
            Funktion (x, y, Breite, Höhe, Radius, Füllung, Strich) {
                if (Typ des Strichs == "undefiniert") {
                    Strich = wahr;
                }
                wenn (Typ von Radius === "undefiniert") {
                    Radius = 5;
                }
                dies.beginPath();
                dies.moveTo(x + radius, y);
                this.lineTo(x + Breite - Radius, y);
                this.quadraticCurveTo(x + Breite, y, x + Breite, y + Radius);
                this.lineTo(x + Breite, y + Höhe - Radius);
                this.quadraticCurveTo(x + Breite, y + Höhe, x + Breite - Radius, y + Höhe);
                this.lineTo(x + Radius, y + Höhe);
                this.quadraticCurveTo(x, y + Höhe, x, y + Höhe - Radius);
                dies.lineTo(x, y + radius);
                dies.quadraticCurveTo(x, y, x + radius, y);
                dies.closePath();
                wenn (Strich) {
                    dieser.Strich();
                }
                wenn (füllen) {
                    dies.füllen();
                }
            };
    }
 
    Funktion zuBild() {
        var imageUri = Zeichnung.toDataURL('Bild/png');
        var imageTag = document.createElement('img');
        imageTag.style = 'Rand: 10px; Breite: 200px; Höhe: 200px'
        imageTag.src = Bild-Uri;
        document.body.appendChild(Bild-Tag)
    }
 
    Funktion drucken(txt) {
        document.getElementById("container").innerHTML += ('\n') + txt;
    }
 
    dokument.body.onclick = Funktion () {
        Fenster.Standort.neu laden()
    }
    console.log = drucken;
 
 
</Skript>
 
 
</html>

Effektbild:

Fügen Sie einen kleinen Code hinzu: Canvas generiert Bilder mit abgerundeten Ecken (Avatare usw.)

KreisBild(ctx, Bild, x, y, r) {
    ctx.speichern();
    var d =2 * r;
    var cx = x + r;
    var cy = y + r;
    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
    ctx.clip();
    ctx.drawImage(img, x, y, d, d);
    ctx.wiederherstellen();
  }

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

JS+CSS zum Erstellen eines vollständigen Beispiels einer verschiebbaren Popup-Ebene mit Spezialeffekten und schönen abgerundeten Ecken
Abstrakter CSS-Effekt mit abgerundeten Ecken, implementiert mit js!!
Verwenden von js zum Generieren und Aktualisieren von CSS-abgerundeten Ecken

<<: Centos7-Konfiguration, Fastdfs und Analyse des Implementierungsprozesses des verteilten Dateispeichersystems Nginx

>>: So finden Sie identische Dateien in Linux