1

で線画を実装しましたcanvas。しかし、私は問題に直面しました。

線幅が小さい場合（3）、曲線は見栄えがします。
線幅が大きい場合（20）、切れ目があり曲線が良くないように見えます。

ここに画像の説明を入力してください

canvas.node.onmousemove = function (e) {
         if (!canvas.isDrawing) {
             return;
         }
         var x = e.pageX - this.offsetLeft;
         var y = e.pageY - this.offsetTop;
         ctx.beginPath();
         ctx.moveTo(canvas.lastX, canvas.lastY);
         ctx.strokeStyle = '#000000';
         ctx.lineWidth = self.lineWidth();
         ctx.lineTo(x, y);
         ctx.stroke();
         ctx.closePath();
         canvas.lastX = x;
         canvas.lastY = y;
};
canvas.node.onmousedown = function (e) {
         canvas.isDrawing = true;
         canvas.lastX = e.pageX - this.offsetLeft;
         canvas.lastY = e.pageY - this.offsetTop;
};
canvas.node.onmouseup = function (e) {
         canvas.isDrawing = false;
};

大きな線の切れ目を避けて線を太くするにはどうすればよいですか？
ありがとうございました。

4

1 に答える 1

2

lineJoinプロパティをキャンバスコンテキストに設定してみましたか？

を設定した後、次の行を追加しますlineWidth。

ctx.lineJoin = 'round';

を使用してすべてのレンダリングを完了する前にパスを閉じた場合、これは機能しません。lineToctx.closePath()

線の描画を開始する前にパスを開き、線の描画が終了したらパスを閉じる必要があります。

moveToまた、描画中にを使用して描画カーソルを移動しても、lineJoinは機能しません。

次の変更されたコードを試すことができます（最後にJSFiddleリンクも含めました）。

編集1：lineJoinプロパティを追加するのを忘れたため、コードを更新しました。

編集2：moveTo行を適切なリスナーメソッドに移動しました。

canvas.node.onmousemove = function (e) {
         if (!canvas.isDrawing) {
             return;
         }
         var x = e.pageX - this.offsetLeft;
         var y = e.pageY - this.offsetTop;

         ctx.lineTo(x, y);
         ctx.stroke();

         canvas.lastX = x;
         canvas.lastY = y;
};
canvas.node.onmousedown = function (e) {
         canvas.isDrawing = true;
         canvas.lastX = e.pageX - this.offsetLeft;
         canvas.lastY = e.pageY - this.offsetTop;

         ctx.moveTo(canvas.lastX, canvas.lastY);
         ctx.beginPath();
         ctx.strokeStyle = '#000000';
         ctx.lineWidth = self.lineWidth();
         ctx.lineJoin = 'round';

};
canvas.node.onmouseup = function (e) {
         ctx.closePath();
         canvas.isDrawing = false;
};

ここでJSFiddleを動作させます。

于 2012-12-27T17:05:12.443 に答える