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:
|
>>: So finden Sie identische Dateien in Linux
Artikel empfehlen
Installation und Überprüfung von PyTorch in einer Linux- oder Windows-Umgebung (Lösung des Laufzeitfehlerproblems)
1. Laden Sie die entsprechende Installationsdatei...
Lösung für das Problem ungenauer JS-Zahlen
Die verständlichste Erklärung des Genauigkeitspro...
So stellen Sie MySQL-Master und -Slave in Docker bereit
Bild herunterladen Auswählen eines MySQL-Images D...
Wie funktionieren die dynamischen Komponenten von Vue3?
Inhaltsverzeichnis 1. Komponentenregistrierung 1....
Detaillierte Erklärung der JQuery-Datagrid-Abfrage
Inhaltsverzeichnis Fügen Sie dem Tree-Element Cod...
Mac+IDEA+Tomcat-Konfigurationsschritte
Inhaltsverzeichnis 1. Herunterladen 2. Installati...
jQuery implementiert alle Warenkorbfunktionen
Inhaltsverzeichnis 1. Alles auswählen 2. Erhöhen ...
Mehrere gängige Methoden zum Festlegen der Ankerpositionierung in HTML
Mir sind mehrere Möglichkeiten bekannt, die Ankerp...
Detaillierte Erklärung der TMPF-Mounts im Docker-Datenspeicher
Bevor Sie diesen Artikel lesen, hoffe ich, dass S...
Detaillierte Erklärung zur Identifizierung von Dateien mit gleichem Inhalt unter Linux
Vorwort Manchmal stellen Dateikopien eine enorme ...
Beispielcode für die Master-Slave-Trennung einer MySQL-Datenbank
einführen Durch das Einrichten einer Lese-/Schrei...
Kurze Analyse des MySQL-Zeichensatzes, der Datenbankwiederherstellungsfehler verursacht
Beim Importieren von Daten mit falscher MySQL-Zei...
Eine kurze Diskussion über MySql-Ansichten, Trigger und gespeicherte Prozeduren
Sicht Was ist eine Ansicht? Welche Rolle spielt e...
Detaillierter Prozessbericht der Vue2-Initiierungsanfragen mit Axios
Inhaltsverzeichnis Vorwort Axios-Installation und...
Detaillierte Erläuterung der Ereignisschleifen-Ereigniswarteschlange von js im Browser
Inhaltsverzeichnis Vorwort Einen Stapel und zwei ...