canvasで線を書くときに、
太字になるとどうしても線が荒くなり綺麗な曲線を描けません。
下のリンクのサイトでは、綺麗な曲線になっていて、どのように書かれているのか分からず、
同じような曲線を描きたいのですが、
どのようなjsの記述が必要でしょうか。
canvasで線を書くときに、
太字になるとどうしても線が荒くなり綺麗な曲線を描けません。
下のリンクのサイトでは、綺麗な曲線になっていて、どのように書かれているのか分からず、
同じような曲線を描きたいのですが、
どのようなjsの記述が必要でしょうか。
lineJoin
を'round'
にすれば線と線の継ぎ目が目立たなくなります。またbezierCurveTo
などの曲線用メソッドも使った方がよいです。
var ctx = canvas.getContext('2d');
ctx.lineWidth = 30;
ctx.lineJoin = 'round';
ctx.beginPath();
ctx.moveTo(points[0], [1]);
for (var i = 2; i < points.length - 5; i += 4)
{
ctx.bezierCurveTo(points[i], points[i + 1], points[i + 2], points[i + 3], points[i + 4], points[i + 5]);
}
ctx.stroke();