=
100.26.176.182

Daschmi's Notizblog

Logo des Etikators - Tool um online drucken von Etiketten für selbst angefertigte Tinkturen

Canvas und Rechtecke mit abgerundeten Ecken

Erstellt in Sonstiges am 31. Juli 2019

Für den Etikator brauchte ich eine kleine Funktion, die in der HTML5 Visualisierung runde Ecken darstellt. Diese habe ich mit dem Canvas Element und folgender Funktion realisiert:

function roundRect(ctx, x, y, w, h, r) {
   
   ctx.beginPath();
   ctx.moveTo(x + r, y);
   ctx.lineTo(x + w - r, y);
   ctx.quadraticCurveTo(x + w, y, x + w, y + r);
   ctx.lineTo(x + w, y + h - r);
   ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
   ctx.lineTo(x + r, y + h);
   ctx.quadraticCurveTo(x, y + h, x, y + h - r);
   ctx.lineTo(x, y + r);
   ctx.quadraticCurveTo(x, y, x + r, y);
   ctx.closePath();

}


Bitte genehmigen Sie die Verwendung von Cookies dieser Website! Mehr Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen