ポリゴンを作成するプロジェクト用のカスタム メソッドを 1 つ作成しています。私はこれを持っています：
var c2 = document.getElementById('c').getContext('2d');
c2.fillStyle = '#f00';
c2.beginPath();
c2.moveTo(10, 20);
c2.lineTo(20, 10);
c2.lineTo(60, 10);
c2.lineTo(60, 30);
c2.lineTo(20, 30);
c2.lineTo(10, 20);
c2.closePath();
c2.fill();
ライブ デモ: http://jsfiddle.net/yd7Wv/4292/丸みを帯びたエッジが必要な ため、ベジェ カーブを使用する必要があります 。ベジェ カーブについて教えてください。よろしく、 ダニエル
bezierCurveToすでに実装されているメソッドを使用します。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
http://www.w3schools.com/tags/canvas_beziercurveto.asp
または、以下のような独自のバジエ曲線法を作成することもできます。
coord = function (x,y) {
if(!x) var x=0;
if(!y) var y=0;
return {x: x, y: y};
}
function B1(t) { return t*t*t }
function B2(t) { return 3*t*t*(1-t) }
function B3(t) { return 3*t*(1-t)*(1-t) }
function B4(t) { return (1-t)*(1-t)*(1-t) }
function getBezier(percent,C1,C2,C3,C4) {
var pos = new coord();
pos.x = C1.x*B1(percent) + C2.x*B2(percent) + C3.x*B3(percent) + C4.x*B4(percent);
pos.y = C1.y*B1(percent) + C2.y*B2(percent) + C3.y*B3(percent) + C4.y*B4(percent);
return pos;
}
を使用してベジエ曲線を描くことができます
canvas_context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
と
canvas_context.quadraticCurveTo(cpx, cpy, x, y);
これらのドキュメントが役立ちます