Hauptmenü

Werkzeuge

Kategorien

Archiv

Tineco nass und trockensauger Einhell Kaffeemaschinen Vergleich Ladekabel Shelly H&T Gen3 Liste von RTSP URLs für gängige Kameras Freischneider Test 2026 Test Wärmepumpentrockner 2026 USB Adapter Vergleich Ladekabel Staubsauger Vergleich Ladekabel lubluelu CHYW201 im Test: Fensterputzroboter ganz ohne Netzkabel Mammotion YUKA mini 2 1000 im Test: Mähroboter ganz ohne Begrenzungsdraht Welcher Wasserkocher ist der Beste? Unser ehrlicher Vergleich 2026 Einhell GP-LB 36/210: Der Power-X-Change-Laubbläser im Test

Canvas und Rechtecke mit abgerundeten Ecken

Erstellt in Allgemein am 31. Juli 2019 vom Daschmi

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();

}