Fatal编程技术网
  • javascript/
  • Javascript HTML5画布-从对象创建淡入淡出轨迹

Javascript HTML5画布-从对象创建淡入淡出轨迹

javascript html canvas

Javascript HTML5画布-从对象创建淡入淡出轨迹,javascript,html,canvas,fade,Javascript,Html,Canvas,Fade,所以，我有两个对象，一个应该在后面有轨迹，另一个不应该 在这里，我有一个基本的设置开始： 所以我目前使用ctx.clearRect，这显然是错误的（AFAIK）。所以我想到的是在每一帧中添加一个淡入淡出的alpha，但这会影响两个对象和画布背景 有没有办法只影响obj1而不影响背景 此外，存储每个帧位置和角度的数组不是一个选项，因为在我的原始代码中，我有动画精灵，不希望轨迹动画-。- 另外，在我的原始代码中，画布背景是一幅图像，因此将淡入淡出颜色设置为与背景相同的颜色将不起作用。您正在通过覆盖

所以，我有两个对象，一个应该在后面有轨迹，另一个不应该

在这里，我有一个基本的设置开始：

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

有没有办法只影响obj1而不影响背景

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

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

您正在通过覆盖半透明层来创建具有淡入淡出尾部效果的圆

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

左：静态图像，右：在背景图像上绘制的图像

此静态图像有几个优点：

  • 该效果不会影响画布上的其他图形

  • 创建后，静态图像可以快速绘制到画布上的任意x、y和旋转

  • 静态图像可以覆盖背景图像，而无需进一步的像素操作

下面是示例代码和演示：


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cometImage=新图像（）；
cometImage.onload=函数（）{
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/nightscape.jpg";
函数start（）{
ctx.fillStyle=“黑色”；
ctx.fillRect（0,0，canvas.width，canvas.height）；
ctx.drawImage（img，0,0）；
ctx.drawImage（cometImage，0,0）；
}
}
cometImage.src=cometURL（）；
//创建半透明的“彗星”效果（尾部渐暗的球）
//将效果作为URL返回，该URL可用于创建图像。
函数cometURL（）{
var tempCanvas=document.createElement（“画布”）；
var ctx=tempCanvas.getContext（“2d”）；
tempCanvas.width=canvas.width；
tempCanvas.height=canvas.height；
var-cx=250；
var-cy=250；
var r=30；
var PI2=数学PI*2；
ctx.fillStyle=“黄金”；
var梯度=ctx.createLinearGradient（250250,50,50）；
渐变。添加颜色停止（0.00，“透明”）；
渐变。添加颜色停止（1.00，“金色”）；
ctx.线宽=40；
ctx.lineCap=“圆形”；
ctx.beginPath（）；
ctx.moveTo（250250）；
ctx.lineTo（75,75）；
ctx.strokeStyle=梯度；
ctx.stroke（）；
ctx.beginPath（）；
ctx.arc（75,75,20,0，PI2）；
ctx.closePath（）；
ctx.fillStyle=“黄金”；
ctx.globalAlpha=0.50；
ctx.fill（）；
ctx.globalAlpha=1.00；
ctx.beginPath（）；
ctx.arc（75,75,20,0，PI2）；
ctx.closePath（）；
ctx.fillStyle=“黄金”；
ctx.shadowColor=“金色”；
ctx.shadowBlur=5；
ctx.fill（）；
return（tempCanvas.toDataURL（））；
}
}); // end$（函数（）{}）；
当它移动时，它是否工作？如果使用动画精灵而不是圆，这是否有效？如果物体改变方向，这个方法有效吗？是的，是的&是的（弯曲转弯和角度转弯的不同技术）。你能举一个小提琴的例子吗（只是移动，没有精灵）？ 
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
}

<!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>