0

以下のコード スニペットを使用して、 Image of canvas の色を塗りつぶそうとしています。キャンバスに色をうまく塗りつぶします。今、このコードスニペットを使用して、ユーザーのタッチで塗りつぶされた色を消去して、イメージのキャンバスの色を消去しようとしています。そのタッチした位置に色を消し、透明な領域を設定します。今、私はユーザーのタッチでその領域を色で塗りつぶしたいのですが、透明なピクセルのためにその領域に色を付けることができません。ピクセルを色で補充する方法はありますか、またはキャンバスの画像から色を消去する他の方法はありますか? 返信をいただければ幸いです。

キャンバスの画像に色を塗りつぶすためのコード スニペット

var ctx = canvas.getContext('2d'),
    img = new Image;
img.onload = draw;
img.crossOrigin = 'anonymous';
img.src = "https://dl.dropboxusercontent.com/s/1alt1303g9zpemd/UFBxY.png";

    function draw(color) {
      ctx.drawImage(img, 0, 0);
    }
    canvas.onclick = function(e){
       var rect = canvas.getBoundingClientRect();
       var x = e.clientX-rect.left,
           y = e.clientY-rect.top;

        ctx.globalCompositeOperation = 'source-atop';
        ctx.fillStyle = 'blue';
        ctx.beginPath();
        ctx.arc(x-5,y-5,10,0,2*Math.PI);
        ctx.fill();

      }

キャンバスの画像の色を消去するためのコード スニペット

(function() {
    // Creates a new canvas element and appends it as a child
    // to the parent element, and returns the reference to
    // the newly created canvas element


    function createCanvas(parent, width, height) {
        var canvas = {};
        canvas.node = document.createElement('canvas');
        canvas.context = canvas.node.getContext('2d');
        canvas.node.width = width || 100;
        canvas.node.height = height || 100;
        parent.appendChild(canvas.node);
        return canvas;
    }

    function init(container, width, height, fillColor) {
        var canvas = createCanvas(container, width, height);
        var ctx = canvas.context;
        // define a custom fillCircle method
        ctx.fillCircle = function(x, y, radius, fillColor) {
            this.fillStyle = fillColor;
            this.beginPath();
            this.moveTo(x, y);
            this.arc(x, y, radius, 0, Math.PI * 2, false);
            this.fill();
        };
        ctx.clearTo = function(fillColor) {
            ctx.fillStyle = fillColor;
            ctx.fillRect(0, 0, width, height);
        };
        ctx.clearTo(fillColor || "#ddd");

        // bind mouse events
        canvas.node.onmousemove = function(e) {
            if (!canvas.isDrawing) {
               return;
            }
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            var radius = 10; // or whatever
            var fillColor = '#ff0000';
            ctx.globalCompositeOperation = 'destination-out';
            ctx.fillCircle(x, y, radius, fillColor);
        };
        canvas.node.onmousedown = function(e) {
            canvas.isDrawing = true;
        };
        canvas.node.onmouseup = function(e) {
            canvas.isDrawing = false;
        };
    }

    var container = document.getElementById('canvas');
    init(container, 531, 438, '#ddd');

})();
4

1 に答える 1

1

テストされていないコードに警告！

// create a clipping region using your erasing rect's x,y,width,height
context.save();
context.beginPath();
context.rect(erasingRectX,erasingRectY,erasingRectWidth,erasingRectHeight);
context.clip();

// redraw the original image.
// the image will be redrawn only into the erasing rects boundary
context.drawImage(yourImage,0,0);

// compositing: new pixels draw only where overlapping existing pixels
context.globalCompositeOperation='source-in';

// fill with your new color
// only the existing (clipped redrawn image) pixels will be colored
context.fillStyle='red';
context.fillRect(0,0,canvas.width,canvas.height);

// undo the clipping region
context.restore();
于 2015-10-01T03:58:47.560 に答える