要素にスムーズなスケッチと描画を実装する

Implementing Smooth Sketching

解決：

私は少し前にこのようなものを作り、それをjqueryプラグインに変えました。ここを見てください。それがあなたの目的である場合は、より詳細な回答を投稿し、アーカイブから簡略化されたjqueryバージョンを掘り下げます。

http://jsfiddle.net/95tft/

編集

OK、申し訳ありませんが、昨日はこれを行うことができませんでした：

もともと上記のコードは、ここにあるDoob氏の「ハーモニー」スケッチャーからフォークされました：http：//mrdoob.com/projects/harmony/#ribbon

（これが最善の解決策だと思います）。しかし、私はちょっとそれを分解して、別のプロジェクトで自分の目的のために作り直しました。私は自分のプラグインを少しハックして、ここでも少し簡単にしました：

http://jsfiddle.net/dh3bj/

変更したい唯一のことは、マウスダウン/マウスアップで動作するように変更することです。これは、プラグインの下部にある設定も確認するのが簡単なはずです。ブラシのサイズ、色、アルファ（rgba）など。

それが役立つことを願っています

このコードを見てください：

http://jsfiddle.net/aMmVQ/

私がやっていることは、mouseDownでポイントの新しいリストを開始し、次に、mousemoveごとにリストにポイントを追加することです。十分なポイント（6程度）を取得したら、2次曲線の描画を開始します。曲線の制御点は、現在の点と次の点の平均です。

drawPointsは、この魔法を機能させるビットです。

function drawPoints（ctx、points）{//代わりに基本的な円を描くif（points.length<6) { var b = points[0]; ctx.beginPath(), ctx.arc(b.x, b.y, ctx.lineWidth / 2, 0, Math.PI * 2, !0), ctx.closePath(), ctx.fill(); return } ctx.beginPath(), ctx.moveTo(points[0].x, points[0].y); // draw a bunch of quadratics, using the average of two points as the control point for (i = 1; i < points.length - 2; i++) { var c = (points[i].x + points[i + 1].x) / 2, d = (points[i].y + points[i + 1].y) / 2; ctx.quadraticCurveTo(points[i].x, points[i].y, c, d) } ctx.quadraticCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y), ctx.stroke() }   
croquis.jsを使ってみませんか？
 
それはフォトショップのようなきちんとしたブラシの実装を持っています:)
 
そして、これがcroquis.jsを使用しているデモです。