Как сделать прямоугольник с закругленными углами в канвасе

Это не предусмотрено стандартом Canvas, но его можно получить с четырьмя кривыми, образующими прямой (и округленный) угол.

Углы прямоугольника можно скругить с помощью quadraticCurve

Это можно сделать путем замены функции rect четырьмя квадратичными кривыми.

Требуется свежий браузер: Edge, Chrome, Firefox, Safari .

Код:

function roundedRectangle(x, y, w, h)
{
  var canvas = document.getElementById("canvas4"); 
  var context = canvas.getContext("2d");
  var mx = x + w / 2;
  var my = y + h / 2;
  context.beginPath();
  context.strokeStyle="green";   
  context.lineWidth="4";   
  context.moveTo(x,my);
  context.quadraticCurveTo(x, y, mx, y);
  context.quadraticCurveTo(x+w, y, x+w, my);
  context.quadraticCurveTo(x+w, y+h, mx, y+h);
  context.quadraticCurveTo(x, y+h, x, my);      
  context.stroke();
}
roundedRectangle(10, 10, 200, 100);

Кривая проходит от середины с одной стороны к другой. Но даже если можно расположить контрольные точки ближе к малым сторонам, у нас нет прямого угла.

Для прямого угла кривая сочетается с прямой

Для этого сочетаются прямая линия и квадратичная кривая (или дуга).

Код:

context.moveTo(x+radius, y);
context.lineTo(x+w-radius, y);
context.quadraticCurveTo(x+w, y, x+w, y+radius);

Значение радиуса более или менее равно радиусу угла, который составляет четверть круга, и соответствует начальной точке кривой в продолжении прямой линии.

Настоящий прямоугольник с закругленными углами объединяет четыре из этих рисунков

Достаточно объединить четыре фигуры этого стиля, чтобы сформировать полный прямоугольник.

Конечный исходный код прямоугольника с закругленными углами:


<canvas id="canvas6" width="400" height="120"></canvas>
<script type="text/javascript">
function roundRect(x, y, w, h, radius)
{
  var canvas = document.getElementById("canvas6");
  var context = canvas.getContext("2d");
  var r = x + w;
  var b = y + h;
  context.beginPath();
  context.strokeStyle="green";
  context.lineWidth="4";
  context.moveTo(x+radius, y);
  context.lineTo(r-radius, y);
  context.quadraticCurveTo(r, y, r, y+radius);
  context.lineTo(r, y+h-radius);
  context.quadraticCurveTo(r, b, r-radius, b);
  context.lineTo(x+radius, b);
  context.quadraticCurveTo(x, b, x, b-radius);
  context.lineTo(x, y+radius);
  context.quadraticCurveTo(x, y, x+radius, y);
  context.stroke();
}
roundRect(10, 10, 200, 100, 20);
</script>

Размер кода кажется невероятным, но байтекод, созданный компилятором JavaScript, сводит его к нескольким инструкциям.

Применение

А также...