QQs'Note
0%

Canvas2DRenderingContext2D

Posted on

Canvas2DRenderingContext2D

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
ctx.beginPath();
ctx.fillStyle = '#5E8C7B';
ctx.strokeStyle = '#FFFFFF';
ctx.lineWidth = 4;
ctx.lineJoin = 'round';

// Draw left side (head to tail)
ctx.moveTo(leftPoints[0].x, leftPoints[0].y);
for (let i = 1; i < leftPoints.length; i++) {
    const xc = (leftPoints[i].x + leftPoints[i - 1].x) / 2;
    const yc = (leftPoints[i].y + leftPoints[i - 1].y) / 2;
    ctx.quadraticCurveTo(leftPoints[i - 1].x, leftPoints[i - 1].y, xc, yc);
}
ctx.closePath();
ctx.fill();
ctx.stroke();