Question

我想在移动物体后面画一条越来越多的小道。我知道这看起来很容易:)但是有一些限制：

小道必须有一些同质的透明度
由于性能问题我无法使用缓存方法

我测试了两种方法：

一个使用lineTo（）并递增笔触宽度，但alpha透明度不均匀......

一个用lineTo（）和圆圈填充空白，透明度没问题但是从左到右绘制时出现奇怪的行为，出现负空格......

我也尝试将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);

画布 - 如何画出不断增长的痕迹

1 个答案: