3

alpha = 0HTML5キャンバスにどのように描画しますか？フォトショップのクローンを作成していると想像してください。赤一色のレイヤーがあります。消しゴムツールを選んでで描きます。背景がrgba(0,0,0,0)透けて見えるようになっています。HTML5 Canvasでこれを行うにはどうすればよいですか？

ここにいくつかのコードがあります。

var rand = function(v) {
    return Math.random() * v;
};

var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");

// fill the canvas with black
ctx.fillStyle = "red";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Erase some circles (draw them in 0,0,0,0);
ctx.fillStyle = "rgba(0,0,0,0)";
ctx.globalCompositeOperation = "copy";
for (var ii = 0; ii < 5; ++ii) {
    ctx.beginPath();
    ctx.arc(rand(canvas.width), rand(canvas.height), 
            rand(50) + 20, 0, 360, false);
    ctx.fill();
}

/*
source-over    
source-in    
source-out    
source-atop

destination-over    
destination-in    
destination-out    
destination-atop

lighter    
darker    
copy    
xor
*/
canvas {
    margin: 10px;
    border: 1px solid black;
    background-color: yellow;
}
<div>Want red with yellow circles</div>
<canvas></canvas>

これは機能しません。すべてのキャンバス操作は無限に大きいと見なされます。つまりglobalCompositeOperation、「コピー」に設定して各円（円弧）を描画すると、各円の外側のすべてが効果的に消去されます。

円に一致するようにクリッピングを設定できる可能性がありますが、理想的には、フォトショップブラシと同じように、アンチエイリアス処理された円で消去できるようにしたいと思います。

4

3 に答える 3

5

以下を使用します。

ctx.fillStyle = "rgba(0,0,0,1)"; // (Drawing with 0 alpha pretty much means doing nothing)
ctx.globalCompositeOperation = "destination-out";

実施例

以前のものを保存してglobalCompositeOperation復元することを忘れないでください。そうしないと、後で透明度が適切に機能しなくなります。

alpha=0問題は、「キャンバス上で描画すると、デフォルトで「インク」の目に見えないレイヤーがオーバーレイされるだけです。

于 2012-12-28T08:08:47.883 に答える
0

流暢に消去する必要がある場合、マウスをクリックして移動したときにこの行を消去する必要がある場合、これが解決策になる可能性があります。

var canvas = document.getElementById("myCanvas");
var eraseWidth = 5;

$("#myCanvas").mousedown(function(canvas){          //the mousedown (writing) handler, this handler does not draw, it detects if the mouse is down (see mousemove)
    x = canvas.pageX-this.offsetLeft;
    y = canvas.pageY-this.offsetTop;
});

$("#myCanvas").mousemove(function(canvas){
    context.beginPath();
    var x2 = x-(eraseWidth/2);          //x2 is used to center the erased rectangle at the mouse point
    var y2 = y-(eraseWidth/2);          //y2 is used to center the erased rectangle at the mouse point
    context.clearRect(x2, y2, eraseWidth, eraseWidth);              //clear the rectangle at the mouse point (x2 and y2)
    context.closePath();
};

基本的にこれが行うことは、マウスハンドラーが mousemove イベントを送信し、キャンバスの中心の x 座標と y 座標を使用して長方形をクリアするたびに、マウスが移動したときに長方形をクリアすることです。その結果、行がクリア (消去) されます。

OK、動きが速すぎると四角形が見えますが、私のプロジェクトはコンセプトだったので、うまくいきました ;)

于 2012-12-28T11:57:12.567 に答える
0

Photoshop のクローンに似たものを作成している場合は、レイヤーごとにキャンバスを作成するのがおそらく最適です。これにより、すべてが大幅に簡素化され、見返りにパフォーマンスが向上すると思います.

于 2012-12-30T19:16:08.523 に答える