0

描画アプリケーションがあります。キャンバス上の描画を追跡し、次のようなものを使用してレンダリングします。

canvas.moveTo(x[0]-1, y[0]);
for(var i=0;i<x.length;i++)
{
  canvas.lineTo(x[i], y[i]);
  canvas.moveTo(x[i], y[i]);
}

このように、マウスを「ストローク」すると、マウスでキャンバスにアクセスした順序で一連の線が描画されます。

ただし、これは正しく表示されません。lineJoin が設定されているため、途切れ途切れに見え、間違いなく「丸」ではありません。moveTo代わりに、ループ内のそれぞれでクロージング、ストローク、および新しいパスを作成することで、これを解決できます。ただし、これは恐ろしく遅いです。

線が非常にブロック状で奇妙な方法で描画されるのはなぜですか?

4

1 に答える 1

0

各行は moveTo で「継続」するため、行が実際に「結合」されることはありません。それはすべて、1 つの大きな行と見なされます。このレンダリングをスムーズに行うための解決策lineCapは、キャンバス コンテキストのプロパティを「round」に設定することです。

これは、何らかの理由でまったく同じではありませんが、角の周りにいくつかの「ぎこちない」が見られますが、以前のように非常に明白ではありません

于 2013-05-10T04:47:25.640 に答える