畫布 - 如何繪製一條正在增長的路線

Question

我想繪製一個移動物體背後的增長軌跡。我知道這看起來很容易:)但也有一些限制：

• 線索必須具有一定的同質透明度
• 我不能使用，因爲性能的高速緩存方法問題

我已經測試2種方式：

一個用了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);