HTML5 Canvas - Create Fading Trail From Object

Question

So, I have 2 objects, one that should have trails after it and one that shouldn't.

Here I have a basic setup to start off with:

var obj = { // Had to add some random code with the fiddle -.- :P #IGNORE
    x: _NUMBER,
    y: _NUMBER,
    vx: _NUMBER,
    vy: _NUMBER,
    c: _STRING,
    t: _BOOLEAN
}

So I currently use ctx.clearRect, which is obviously wrong (AFAIK). So what I came up with is to add a fade of alpha in each frame, http://jsfiddle.net/dhEff/1/ , but that affects both objects and affects the canvas background.

Is there any way to do this that will only affect obj1 and won't affect the background?

Also, storing an array with each frames positions and angles is not an option because in my original code, I have animating sprites and do not want the trails to animate -.-.

Also also, in my original code, the canvas background is an image, so setting the fade color to the same as the background wouldn't work then.

Answer 1

You are creating your circle-with-faded-tail effect by overlaying semi-transparent layers.

But your circle-with-faded-tail can also be represented as a static semi-transparent image.

Left: The static image, Right: The image drawn on a background image.

在此处输入图片说明

This static image has several advantages:

The effect does not affect other drawings on the canvas.
Once created, a static image is fast to draw to the canvas at any x,y and rotation.
The static image can overlay a background image without further pixel manipulation.

Here's example code and a Demo: http://jsfiddle.net/m1erickson/K6wvf/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var cometImage=new Image();
    cometImage.onload=function(){

        var img=new Image();
        img.onload=start;
        img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/nightscape.jpg";
        function start(){
            ctx.fillStyle="black";
            ctx.fillRect(0,0,canvas.width,canvas.height);
            ctx.drawImage(img,0,0);
            ctx.drawImage(cometImage,0,0);
        }

    }
    cometImage.src=cometURL();

    // create a semi-transparent "comet" effect (ball with fading tail)
    // return the effect as a URL which can be used to create an image.
    function cometURL(){
        var tempCanvas=document.createElement("canvas");
        var ctx=tempCanvas.getContext("2d");
        tempCanvas.width=canvas.width;
        tempCanvas.height=canvas.height;

        var cx=250;
        var cy=250;
        var r=30;
        var PI2=Math.PI*2;

        ctx.fillStyle="gold";

        var gradient=ctx.createLinearGradient(250,250,50,50);
        gradient.addColorStop(0.00,"transparent");
        gradient.addColorStop(1.00,"gold");

        ctx.lineWidth=40;
        ctx.lineCap="round";
        ctx.beginPath();
        ctx.moveTo(250,250);
        ctx.lineTo(75,75);
        ctx.strokeStyle=gradient;
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(75,75,20,0,PI2);
        ctx.closePath();
        ctx.fillStyle="gold";
        ctx.globalAlpha=0.50;
        ctx.fill();
        ctx.globalAlpha=1.00;

        ctx.beginPath();
        ctx.arc(75,75,20,0,PI2);
        ctx.closePath();
        ctx.fillStyle="gold";
        ctx.shadowColor="gold";
        ctx.shadowBlur=5;
        ctx.fill();

        return(tempCanvas.toDataURL());
    }

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

HTML5 Canvas - Create Fading Trail From Object

Question

1 answers

solution1
1 2014-06-21 21:29:25

HTML5 Canvas - Create Fading Trail From Object

Question

1 answers

solution1 1 2014-06-21 21:29:25

solution1
1 2014-06-21 21:29:25