多くの色を選択した後、アニメーションのパフォーマンスとスピードが非常に遅くなる

Question

animation私はアニメーションの2色を変更できるhtmlキャンバスとカラーピッカーを使ってanimationを作ったが、色を数回変更すると、スロー。どのように修正することができますか？私はそれを修正するために管理

var canvas, stage, exportRoot; 
 
var colorArray = ["#f4ed94", "#eef5db", "#c7efcf", "#a9d18e", "#78cbcf",' 
 
    "#5eb3d6", "#bdd7ee", "#af90a9", "#ffc7df", "#ff5a5f", "#e88873", 
 
    "#c4c4c4", "#ffffff", "#6e6460", "#464647"]; 
 

 
function init() { 
 
    canvas = document.getElementById("canvas"); 
 
    handleComplete("", ""); 
 
} 
 

 
    //for Giftbox 
 
    //When Giftbox color change slider is dragged 
 

 
function giftRangeChange(value) { 
 
    var newValue = parseInt(value); 
 
    handleComplete(colorArray[newValue], ""); 
 
} 
 

 
    //When Giftbox color box is clicked 
 

 
function giftColourClick(value) { 
 
    handleComplete(colorArray[value], ""); 
 
    console.log(document.getElementById("gift-range").value); 
 
    document.getElementById("gift-range").value = value; 
 
} 
 

 
    //for ribbon 
 
    //When ribbon color change slider is dragged 
 

 
function ribbonRangeChange(value) { 
 
    var newValue = parseInt(value); 
 
    handleComplete("", colorArray[newValue]); 
 
} 
 

 
    //When ribbon color box is clicked 
 

 
function ribbonColourClick(value) { 
 
    handleComplete("", colorArray[value]); 
 
    document.getElementById("ribbon-range").value = value; 
 
} 
 

 
function handleComplete(box, ribbon) { 
 
    if (box !== "") { 
 
    lib.properties.boxColor = box; 
 
    } 
 
    if (ribbon !== "") { 
 
    lib.properties.ribbonColor = ribbon; 
 
    } 
 

 
    exportRoot = new lib.gifbox(); 
 

 
    stage = new createjs.Stage(canvas); 
 
    stage.addChild(exportRoot); 
 
    stage.enableMouseOver(); 
 

 
    createjs.Ticker.setFPS(lib.properties.fps); 
 
    createjs.Ticker.addEventListener("tick", stage); 
 

 
    (function(isResp, respDim, isScale, scaleType) { 
 
    var lastW, lastH, lastS = 1; 
 
    window.addEventListener('resize', resizeCanvas); 
 
    resizeCanvas(); 
 

 
    function resizeCanvas() { 
 
     var w = lib.properties.width, 
 
     h = lib.properties.height; 
 
     var iw = window.innerWidth, 
 
     ih = window.innerHeight; 
 
     var pRatio = window.devicePixelRatio || 1, 
 
     xRatio = iw/w, 
 
     yRatio = ih/h, 
 
     sRatio = 1; 
 

 
     if (isResp) { 
 
     if ((respDim == 'width' && lastW == iw) || (respDim == 'height' && lastH == ih)) { 
 
      sRatio = lastS; 
 
     } else if (!isScale) { 
 
      if (iw < w || ih < h) 
 
      sRatio = Math.min(xRatio, yRatio); 
 
     } else if (scaleType == 1) { 
 
      sRatio = Math.min(xRatio, yRatio); 
 
     } else if (scaleType == 2) { 
 
      sRatio = Math.max(xRatio, yRatio); 
 
     } 
 
     } 
 
     canvas.width = w * pRatio * sRatio; 
 
     canvas.height = h * pRatio * sRatio; 
 
     canvas.style.width = w * sRatio + 'px'; 
 
     canvas.style.height = h * sRatio + 'px'; 
 
     stage.scaleX = pRatio * sRatio; 
 
     stage.scaleY = pRatio * sRatio; 
 
     lastW = iw; 
 
     lastH = ih; 
 
     lastS = sRatio; 
 
    } 
 
    })(false, 'both', false, 1); 
 
}

enter link description here

Answer 1

。 removeEventListenerを使用して関数handleComplete（box、ribbon）を編集した後、ステージをクリアして以前のカラー値を削除しました。他のソリューションをありがとう。

function handleComplete(box, ribbon) { 
 
\t \t \t 
 
       if (box !== "") { 
 
        lib.properties.boxColor = box; 
 
       } 
 
       if (ribbon !== "") { 
 
        lib.properties.ribbonColor = ribbon; 
 
       } 
 
\t \t \t \t 
 
createjs.Ticker.removeEventListener("tick", stage); 
 
       exportRoot = new lib.gifbox(); 
 

 
       stage = new createjs.Stage(canvas); 
 
\t \t \t \t stage.clear(); 
 
\t \t \t  
 
\t \t \t 
 
       stage.addChild(exportRoot); 
 
       stage.enableMouseOver(); 
 
       createjs.Ticker.setFPS(lib.properties.fps); 
 
       createjs.Ticker.addEventListener("tick", stage);