12

私は HTML5 の落書きアプリに取り組んでおり、バケツ機能のようなものを作りたいと思っています。アイデアは、パスを描画することであり、パスは閉じられ、選択された色 (ストロークの色) で塗りつぶされます。単色では非常にうまく機能しますが、透明なストロークと塗りつぶしが必要な場合、次の問題が発生します。

何が起こるかというと、ストロークの中央 (パスの実際のサンプリング ポイント) まで塗りつぶしが行われるため、シェイプの内側にストロークの半分のサイズの線があり、これは塗りつぶしとストロークの交点であるため、より暗くなります。

私が話していることは、このサンドボックスで実際に見ることができるはずです。

4

3 に答える 3

14

確かに、使用ctx.globalCompositeOperation = 'destination-atop';してください、そしてそれはあなたが期待しているように見えるべきです。

そのように：http：//jsfiddle.net/UcyX4/

（あなたが抱えている問題を見るためにその行を取り出してください）

キャンバスに描画されるのはそれだけではないと仮定すると、おそらくこれを一時的なキャンバスに描画してから、そのキャンバスを通常のキャンバスに描画する必要があります。そうしないと、以前に描画されたすべての形状が台無しになる可能性があります。したがって、次のようなシステムが必要になります：http: //jsfiddle.net/dATfj/

編集：jsfiddleが失敗した場合に貼り付けられたコード：

HTML：

<canvas id="canvas1" width="500" height="500"></canvas>

脚本：

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

var can2 = document.createElement('canvas');
can2.width = can.width;
can2.height = can.height;
ctx2 = can2.getContext('2d');

ctx.strokeStyle = 'rgba(0,0,0,0.7)';
ctx.fillStyle = 'rgba(0,0,0,0.7)';
ctx.lineWidth = 10;


// Stuff drawn normally before
// Here I draw one rect in the old way just to show the old way
// and show something on the canvas before:
ctx.beginPath();
ctx.rect(50,50,100,100);
ctx.fill();
ctx.stroke();


// Draw on can2 then draw can2 to can
ctx2.strokeStyle = 'rgba(0,0,0,0.7)';
ctx2.fillStyle = 'rgba(0,0,0,0.7)';
ctx2.lineWidth = 10;
ctx2.beginPath();
ctx2.rect(50,250,100,100);
ctx2.globalCompositeOperation = 'destination-atop';
ctx2.fill();
ctx2.stroke();

ctx.drawImage(can2, 0, 0);
于 2012-02-10T17:06:38.047 に答える