Question

所以，我有两个对象，一个应该有跟踪后的对象和一个不应该有的对象。

这里我有一个基本的设置：

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
}

所以我目前使用的是ctx.clearRect，这显然是错误的（AFAIK）。所以我想到的是在每个帧http://jsfiddle.net/dhEff/1/中添加一个淡入淡出的alpha，但这会影响两个对象并影响画布背景。

有没有办法做到这只会影响obj1并且不会影响背景？

此外，存储具有每个帧位置和角度的数组不是一种选择，因为在我的原始代码中，我有动画精灵，并且不希望轨迹动画-.-。

另外，在我的原始代码中，画布背景是一个图像，因此将淡化颜色设置为与背景相同的颜色则不会起作用。

Answer 1

您正在通过覆盖半透明层来创建带有褪色圆圈的效果。

但是你的褪色圆圈也可以表示为静态半透明图像。

左：静态图片右：在背景图片上绘制的图片。

enter image description here

这种静态图像有几个优点：

效果不会影响画布上的其他绘图。
创建后，静态图像可以快速绘制到任何x，y和旋转的画布。
静态图像可以覆盖背景图像而无需进一步的像素操作。

以下是示例代码和演示：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 - 从对象创建淡化尾迹

1 个答案: