3

だから私はペイントのようなアプリを作成しています。線がギザギザにならないように、線の周りにソフトなエッジを付けたいと思います。これを簡単に行うためにrgba、ストロークをレイヤー化します。ここにいくつかのコードがあります：

$('canvas').mousemove(function(e){
    // test if user is pressing down
    if(going == true){
        x = e.pageX;
        y = e.pageY;
        // w is the line width, and the last 4 inputs are rgba for the color
        draw(x,y,w+5,100,100,100,0.1);
        draw(x,y,w+4,100,100,100,0.3);
        draw(x,y,w+3,100,100,100,0.5);
        draw(x,y,w+2,100,100,100,0.7);
        draw(x,y,w+1,100,100,100,0.9);
        draw(x,y,w,100,100,100,1);
    };
});

最初は、これでソフト​​ エッジが作成されますが、描画を続けると、何らかの理由でフェード インし、再びギザギザになります。これは、ぼかしがフェードインする方法をより明確に表示するjsfiddleです（ストロークの色とは異なるぼかしの色を使用することにより）：http://jsfiddle.net/mj4zn/1/

質問：

なぜこれが起こっているのですか、どうすればそれを止めることができますか?

余分なコード:

draw関数を見たい場合は、次のとおりです。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function draw(x,y,w,r,g,b,a){
    ctx.lineWidth = w;
    ctx.lineTo(x, y);
    ctx.strokeStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
    ctx.stroke()  
};
4

2 に答える 2

6

この効果が得られる理由は、マウスダウンで新しいパスを開始し、マウスを移動するたびにパスに新しいポイントを追加してからパスを描画するためです。これは、パスの同じ部分を何度も再描画することを意味します。これにより、半透明のピクセルが追加され、柔らかさが失われます。

代わりに、グラデーションの円を「ブラシ」として使用することをお勧めします。変更された jsfiddle は次のとおりです: http://jsfiddle.net/yB3Kr/

draw 関数の主な変更点は次のとおりです。

function draw(x,y,w,r,g,b,a){
    var gradient = ctx.createRadialGradient(x, y, 0, x, y, w);
    gradient.addColorStop(0, 'rgba('+r+', '+g+', '+b+', '+a+')');
    gradient.addColorStop(1, 'rgba('+r+', '+g+', '+b+', 0)');

    ctx.beginPath();
    ctx.arc(x, y, w, 0, 2 * Math.PI);
    ctx.fillStyle = gradient;
    ctx.fill();
    ctx.closePath();
};

これにより、ドットが作成されます。したがって、mousemove では、jsfiddle で確認できるように、連続した線を作成するために (最後の mousemove イベント以降にマウスの座標がどれだけ変化したかに応じて) それを数回呼び出す必要があります。

于 2013-06-28T07:17:16.393 に答える
0

これがあなたが望むものかどうかを確認してくださいhttp://jsfiddle.net/mj4zn/2/

function draw(x,y,w,r,g,b,a){
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    canvas.style.webkitFilter = "blur(1px)";
    ctx.lineWidth = w;
    ctx.lineTo(x, y);
    ctx.strokeStyle = 'rgba(' + r + ',' + g + ',' + b + ',' +a+ ')';

プラス

draw(x,y,w+5,0,0,0,0.9);
于 2013-06-28T06:51:25.957 に答える