HTML Canvasに角丸の矩形を描く

JavaScript

arcメソッドの角度の指定はドロー方向が時計回り・反時計回りであるかに関わらず、3時の方向を0、6時の方向をMath.PI/2、12時の方向をMath.PI*3/2として始点、終点を設定するようだ。

数学のxy座標と比べると6時と12時の方向の値が逆なので分かりにくい。canvasではy軸が原点から上向きに正ではなく、下向きに正となってるために逆になるのだろう。

function roundRect(c, x, y, w, h, r) {
  c.beginPath();
  c.moveTo(x, y+r);
  c.arc(x+r,   y+h-r, r, Math.PI, Math.PI/2, 1);
  c.arc(x+w-r, y+h-r, r, Math.PI/2, 0, 1);
  c.arc(x+w-r, y+r,   r, 0, Math.PI*3/2, 1);
  c.arc(x+r,   y+r,   r, Math.PI*3/2, Math.PI, 1);
  c.closePath();
}

var canvas = document.createElement("canvas");
var c = canvas.getContext('2d');
roundRect(c, 50, 100, 200, 400, 20);
c.stroke();

RoundRectドローのテスト

  • 2018/08/01: arcメソッドに渡すhとwが逆になっていたので修正しました