画布 - 如何绘制成长轨迹

Question

我想在一个移动的物体后面画一条成长的轨迹。我知道这看起来很简单 :) 但是有一些限制：

• 轨迹必须具有某种均匀的透明度
• 由于性能问题，我无法使用缓存方法

我已经测试了两种方法：

一个带有 lineTo() 和递增笔画宽度，但 alpha 透明度不是同质的......

https://jsfiddle.net/zOgs/9ntajsa1/

一个用lineTo()和圆圈填充空白，透明度还可以，但是从左到右绘制时有一个奇怪的行为，出现负空间...

https://jsfiddle.net/zOgs/psa3x9y2/

我也尝试将compositeOperation 与类似的东西一起使用，但它弄乱了我的背景......

trail.alpha = 0.5;
trail.compositeOperation = 'xor';
for(var i=nb; i>=0; i--) {
    trail.graphics.drawCircle(points[i].x,points[i].y,size/2).closePath();  
}   

我找不到这个问题的有效解决方案，我开始绝望:(

Answer 1

可能有更好的方法来做到这一点，但这里有一个简单的方法：使用屏幕外画布绘制轨迹，然后将该画布显示为主舞台的位图子级。

这是基于您的第一个小提琴： https://jsfiddle.net/lannymcnie/9ntajsa1/1/

// Canvas to draw to:
var offCanvas = document.getElementById("canvas2");
var offStage = new createjs.Stage(offCanvas);

// Add the offStage to the main stage.
var bmp = new createjs.Bitmap(offCanvas);
stage.addChild(bmp);
bmp.alpha = 0.1;

// Still get events from main stage  
stage.addEventListener('stagemousemove',onMouseMove);