javascript - Canvas - 如何绘制生长轨迹

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

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

这是一个基于您的第一个 fiddle 的 fiddle : 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);