Hauptmenü

Werkzeuge

Kategorien

Archiv

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

}