キャンバス - 成長トレールを描く方法

Question

動く物体の後ろに成長トレールを描きたい。私は、これは非常に簡単に見える知っている:)しかし、いくつかの制約があります。

• トレイルは、いくつかの均質な透明性
• を持たなければならないと私はので、パフォーマンスの問題の

をキャッシュ方法を使用することはできません、私がテストしています2つの方法：

のlineTo（）とインクリメントストローク幅を持つ一つが、アルファ透明度がホモジェニックではありません...

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

のlineToと

ワン（）と空白を埋めるために、円、透明性がOKですが、左から右に描画するときに奇妙な行動があり、負の空間が表示されます...

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

Iも...このようなもので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

おそらくこれを行うより良い方法がありますが、ここには簡単な方法があります。オフスクリーンのキャンバスを使用して軌跡を描き、そのキャンバスをメインステージのビットマップの子として表示します。ここで

はあなたの最初の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);