如何使橡皮擦圈在画布上的渐变

Question

我正在使用canvas java来擦除toplayer以显示图像的其余部分......

我想像http://rifke.co.uk/一样创建一个（脉冲）渐变，但直到现在我只有一个硬圈。

有没有人帮我制作这个（脉动）渐变圆？ 我的代码如下所示。

＆＃13;

＆＃13;

(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 = 55; // or whatever
            var fillColor = '#ff0000';
            ctx.globalCompositeOperation = 'destination-out';
            ctx.fillCircle(x, y, radius, fillColor);
        };
canvas.node.onmouseenter = function(e) {
            canvas.isDrawing = true;
        };
               
    }

    var container = document.getElementById('canvas');
    init(container, 3020, 3000, '#f8fa58');

})();

＆＃13;

body  { margin: 0px;
background:black;}
#canvas {
    z-index: -1;
    width: 100vw;
    height: 100vh;
    overflow:hidden;
  background: url(http://newscenario.net/bodyholes/files/works/Edward_Shenk.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

＆＃13;

<div id="canvas"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试以下方法：

＆＃13;

＆＃13;

(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();*/
            var radgrad =           ctx.createRadialGradient(x,y,0,x,y,radius);
  radgrad.addColorStop(0, 'rgba(255,0,0,1)');
  radgrad.addColorStop(0.5, 'rgba(228,0,0,.9)');
  radgrad.addColorStop(1, 'rgba(228,0,0,0)');

  // draw shape
  ctx.fillStyle = radgrad;
  ctx.fillRect(x-radius,y-radius,x+radius,y+radius);
        };
        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 = 55; // or whatever
            var fillColor = '#ff0000';
            ctx.globalCompositeOperation = 'destination-out';
            ctx.fillCircle(x, y, radius, fillColor);
        };
canvas.node.onmouseenter = function(e) {
            canvas.isDrawing = true;
        };
               
    }

    var container = document.getElementById('canvas');
    init(container, 3020, 3000, '#f8fa58');

})();

＆＃13;

body  { margin: 0px;
background:black;}
#canvas {
    z-index: -1;
    width: 100vw;
    height: 100vh;
    overflow:hidden;
  background: url(http://i.imgur.com/UhAODHB.gif) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

＆＃13;

<div id="canvas"></div>

＆＃13;

＆＃13;

＆＃13;