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
Implementierungsmethode für HTML-Neun-Raster-Layouts
Die Diversifizierung von Website-Layouts ist unse...
Detaillierte Erläuterung von Beispielen für MySQL-Einzeltabellenabfragevorgänge [Syntax, Einschränkungen, Gruppierung, Aggregation, Filterung, Sortierung usw.]
Dieser Artikel beschreibt die MySQL-Einzeltabelle...
So installieren Sie MySQL über SSH auf einem CentOS VPS
Geben Sie yum install mysql-server Drücken Sie Y,...
So erstellen Sie einen vollständigen Samba-Server unter Linux (CentOS-Version)
Vorwort smb ist der Name eines Protokolls, das fü...
HeidiSQL-Tool zum Exportieren und Importieren von MySQL-Daten
Um den Export und Import von Daten in SQL zu erle...
jQuery + h5 realisiert den Spezialeffekt der Neun-Quadrate-Lotterie (Front-End- und Back-End-Code)
Vorwort: Frontend: jq+h5, um den dynamischen Neun...
Tomcat analysiert XML und erstellt Objekte durch Reflektion
Der folgende Beispielcode stellt die Prinzipien d...
Detaillierte Erklärung der Unterschiede zwischen SQL Joint Query Inner Join, Outer Join und Cross Join
Beim Entwickeln von Anwendungen, die eine Datenba...
Beispiel für die Verwendung von Nginx zur Implementierung eines TCP-Proxys mit Portweiterleitung
Inhaltsverzeichnis Nachfragehintergrund Warum Ngi...
Einführung in die grundlegenden TypeScript-Typen
Inhaltsverzeichnis 1. Grundtypen 2. Objekttyp 2.1...
Lösen Sie das Problem beim Ausführen von Jupyter Notebook auf dem Server
Inhaltsverzeichnis Auf dem Server läuft Jupyter N...
Zusammenfassung der vier Möglichkeiten zum Durchlaufen eines Arrays in JS
Dieser Artikel vergleicht und fasst vier Möglichk...
Probleme mit Vue, das die Homepage von Bibibili imitiert
Technische Struktur Das Projekt ist in zwei Teile...
Fallstudie zum JavaScript DOMContentLoaded-Ereignis
DOMContentLoaded-Ereignis Es wird buchstäblich au...
Zusammenfassung der MySQL-Ansichtsprinzipien und Anwendungsbeispiele
Dieser Artikel fasst die Prinzipien und die Verwe...