0

角を丸めたこの三角形がありますが、次のものを使用していarcToます：

context.moveTo(140, 0);
context.arcTo(180, 100, 100, 100, 4);
context.arcTo(100, 100, 140, 0, 4);
context.arcTo(140, 0, 180, 100, 4);

ご覧のとおり、上部の角度が少しめちゃくちゃに見えます。それを修正する方法はありますか？最初の計算が必要なようmoveTo(x, y)です140, 0が、ここから始めるべきです。

4

2 に答える 2

0

私はちょうどmoveToそれらを取り除き、それらを互いに弧を描いた。174 で最初の部分を開始し、176 (半径 180-4) の作業が行われましたが、174 はまったく重なりがありませんでした。

ライブデモ

​var canvas = document.getElementsByTagName("canvas")[0],
    ctx = canvas.getContext("2d");

canvas.width = canvas.height = 400;

ctx.beginPath();
ctx.arcTo(174, 100, 100, 100, 4);
ctx.arcTo(100, 100, 140, 0, 4);
ctx.arcTo(140, 0, 180, 100, 4);
ctx.arcTo(180, 100, 100, 100, 4);
ctx.stroke();
​
于 2012-12-28T06:11:27.730 に答える
0

これが私が思いついたものです：

var r = 8;
var offset = (6 * r / 4) - 1;

context.arcTo((180 - offset), 100, 100, 100, r);
context.arcTo(100, 100, 140, 0, r);
context.arcTo(140, 0, 180, 100, r);
context.arcTo(180, 100, 100, 100, r);

Loktar が提供するものの一部を使用して、特定の直径で機能することがわかっている比率を使用するように少し変更し、これをオフセットとして使用しました。直径4で、6作品知っています。

もっと良い方法があるようですが、私はこれで満足しています。

于 2012-12-28T17:45:51.907 に答える