1

同じタイトルの投稿を読みましたが、役に立ちましたが、私の質問には答えませんでした。私の描画プログラムでは、ユーザーは画像の上に幅の広い線を自由に描くことができます。ただし、同じスペースに2回描画して線が重なったときに透明度が暗くなることは望ましくありません。

これが起こらないように、キャンバスのlineTo、ストローク、ストロークスタイルなどを使用して描画する方法はありますか? 以下は、私が何をしたかを理解するためのコードスニペットです。

drawPencilDown: function(e, $this)
        {
            $this.ctx.lineJoin = "round";
            $this.ctx.lineCap = "round";
            $this.ctx.strokeStyle = "rgba(255, 255, 255, 1.0)";
            $this.ctx.fillStyle   = "rgba(255, 255, 255, 0.5)";

            $this.ctx.lineWidth = $this.settings.lineWidth;         
            //draw single dot in case of a click without a move
            $this.ctx.beginPath();
            $this.ctx.arc(e.pageX*sx, e.pageY*sy, $this.settings.lineWidth/2, 0, Math.PI*2, true);
            $this.ctx.closePath(); 
            $this.ctx.fill();
            $this.ctx.beginPath(); 
            $this.ctx.moveTo(e.pageX*sx, e.pageY*sy); 
        },

        drawPencilMove: function(e, $this)
        {
            $this.ctx.lineTo(e.pageX*sx, e.pageY*sy);
            $this.ctx.stroke();
        },

        drawPencilUp: function(e, $this)
        {
            $this.ctx.closePath();
        },
4

2 に答える 2

0

globalCompositeOperation プロパティを使用する必要があると思います: https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

source-atop と destination-top の両方が機能します

于 2013-07-23T09:47:30.283 に答える