Question

好的，我从来没有处理过帆布，所以我完全迷失了。尝试将此效果设置为背景：

http://codepen.io/VIRU/pen/FAdkl

但是试图让那些圈子变得模糊，我就这样看到了：

http://stackoverflow.com/questions/5475755/how-to-draw-a-blurry-circle-on-html5-canvas

但是当我尝试它时会弄乱整个画布并且永远不会修改实际的圆圈。所以不确定如何使其发挥作用。

window.onload = function() {

//Create canvas and initialize it's context
var canvas = document.getElementById("flying-bubbles");
var ctx = canvas.getContext("2d");

//Set the dimensions of canvas equal to the window's dimensions
var W = window.innerWidth, H = window.innerHeight;
canvas.width = W;
canvas.height = H;

//Create an array of circles
var circles = []; 
for(var i = 0; i < 20; i++ ){
    circles.push(new create_circle());
}

//Function to create circles with different positions and velocities
function create_circle() {
    //Random Position
    this.x = Math.random()*W;
    this.y = Math.random()*H;

    //Random Velocities
    this.vx = 0.1+Math.random()*1;
    this.vy = -this.vx;

    //Random Radius
    this.r = 10 + Math.random()*50;
}

//Function to draw the background
function draw() {
    //Create the gradient
    var grad = ctx.createLinearGradient(0, 0, W, H);
    grad.addColorStop(0, 'rgba(19, 105, 168,0.8)');
    grad.addColorStop(1, 'rgba(0, 0, 0,1)');

    //Fill the canvas with the gradient
    ctx.globalCompositeOperation = "source-over";
    ctx.fillStyle = grad;
    ctx.fillRect(0,0,W,H);

    //Fill the canvas with the circles
    for(var j = 0; j < circles.length; j++) {
        var c = circles[j];

        //Draw the circle and it with the blur grad
        ctx.beginPath();
        ctx.globalCompositeOperation = "lighter";       
        ctx.fillStyle = grad;
        ctx.arc(c.x, c.y, c.r, Math.PI*2, false);
        ctx.fill();

        //Lets use the velocity now
        c.x += c.vx;
        c.y += c.vy;

        //To prevent the circles from moving out of the canvas
        if(c.x < -50) c.x = W+50;
        if(c.y < -50) c.y = H+50;
        if(c.x > W+50) c.x = -50;
        if(c.y > H+50) c.y = -50;
    }
}

setInterval(draw, 25);

}

Answer 1

您可以为弧添加阴影：

function draw() {

    ctx.shadowColor='rgb(19,105,168)';
    ctx.shadowBlur=20;

    ...

帆布飞行模糊的圈子

1 个答案: