16

次のコードは、jQuery を使用して HTML 5 Canvas に円を作成します。

コード：

//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");

DrawCircle(75, 75, 20);

//draw a circle
function DrawCircle(x, y, radius)
{
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI*2, true); 
    ctx.fillStyle = 'transparent';
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#003300';
    ctx.stroke();
    ctx.closePath();
    ctx.fill();
}

次のタイプの円のいずれかをシミュレートしようとしています。

例

この記事を調べて見つけましたが、適用できませんでした。

円をただ表示するのではなく、描画してもらいたいです。

これを行うより良い方法はありますか？たくさんの数学が関係していると感じています:)

PS私はPaperJsのシンプルさが好きですが、おそらくこれは単純化されたパスを使用する最も簡単なアプローチでしょうか?

4

4 に答える 4

3

あなたのタスクには3つの要件があるようです:

  1. 手描きの形。
  2. 「超精密」ではなく「有機的」ストローク。
  3. 一度にすべてではなく、段階的に円を明らかにします。

始めるには、Andrew Trice によるこの優れた的を絞ったデモをチェックしてください。

この素晴らしい円は私が手書きで描いたものです (もう笑えます...!)

アンドリューのテクニックで作成された私の素晴らしいサークル

Andrew のデモは、要件のステップ 1 と 2 を実行します。

キャンバスで通常使用される通常の超精密な線の代わりに、有機的な見た目の「ブラシ効果」を使用して円 (または任意の形状) を手で描くことができます。

手描きの点の間にブラシ画像を繰り返し描画することにより、「ブラシ効果」を実現します

デモは次のとおりです。

http://tricedesigns.com/portfolio/sketch/brush.html#

コードは GitHub で入手できます。

https://github.com/triceam/HTML5-Canvas-Brush-Sketch

Andrew Trice のデモでは、円を構成する線を描いて忘れます。

あなたの仕事は、3 番目の要件を実装することです (脳卒中を思い出してください)。

  • 手書きで自分だけの円を描き、
  • 円を構成する各線分を配列に保存し、
  • Andrew の様式化されたブラシ テクニックを使用して、これらのセグメントを「再生」します。

結果: 手書きで定型化された円が、一度にではなく段階的に表示されます。

興味深いプロジェクトがあります...気前がよければ、結果を共有してください!

于 2013-09-08T17:06:31.097 に答える