淡出文本并在下一个画布中淡入

Question

So I have a canvas in my game which will display some text but I would like it to be if you have ever played Clicker Heros when you click theres some damage text displayed but its faded in and out slowly and kinda moves upward while fading out I would like to produce the same effect here

So what I have is a function which is called when the user clicks the Terminal I need the text to produce a similiar behavior but I am very new to canvas and not sure how to do so here is my current code

var canvas = document.getElementById("terminalCanvas");
var terminal = canvas.getContext("2d");

terminal.fillStyle = "#000000";
terminal.fillRect(0,0,150,200);

function WriteToCanvas(){
    if(Game.Player.HTMLSupport == 1){
        var rand = Math.floor(Math.random() * 122) + 1;
        var tag = htmltags[rand];
        terminal.font = "20px Comic Sans MS";
        terminal.fillStyle = "rgb(0,255,1)";
        terminal.textAlign = "center";
        terminal.fillText(tag, canvas.width/2, canvas.height/2);
        ClearCanvas();
    }
}

function ClearCanvas(){
    terminal.clearRect(0,0,canvas.width,canvas.height);
    terminal.fillStyle = "#000000";
    terminal.fillRect(0,0,150,200);
}

Answer 1

A particle system is what you need. Bellow at the top of the code is what you need to do a simple and memory efficient particle system. Uses a particle pool. Dead particles go to the pool when their time is up. When new particles are needed check if any dead ones are in the pool, if so resurrect them, else create a new one. This avoids incurring the dreaded GC lag that particle systems can make work extra hard.

It may pay that you don't use the fillText (as it is very slow) to render the particle, but pre render and use drawImage. Up to you.

Sorry I dont have time for a deeper explanation

 /*===================================================================================== ANSWER code start =====================================================================================*/ const LIFETIME = 1 / 180; // 180 frames const YDIST = -140; // number of pixels to move over the life const MOVE_CURVE_SHAPE = 1.5; const FADE_CURVE_SHAPE = 1.5; const FADE_CURVE_ADVANCE = 0.25; // Want the fade not to start early on the fade curve var particles = []; // array to hold live particles var particlePool = []; // to hold the dead // this function is called once a frame function display(){ // put code in here ctx.setTransform(1,0,0,1,0,0); // reset transform ctx.globalAlpha = 1; // reset alpha ctx.clearRect(0,0,w,h); ctx.font = "40px Comic Sans MS"; ctx.fillStyle = "black"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText("Click mouse to add particles",canvas.width/2, 30); if(mouse.buttonRaw & 1){ var p; if(particlePool.length){ // check if the are any dead particles in the pool p = particlePool.shift(); // if so get the first on in out }else{ // nothing in the pool so create a new on p = {}; } // set up the paticle var text = (Math.floor(Math.random()* 10) *100) + "!"; // the text to display p = createParticle(mouse.x,mouse.y,text,p); // set up the particle particles.push(p); // push it onto the active array mouse.buttonRaw = 0; // clear mouse down; } updateParticles(); // update particles renderParticles(); // and draw them } // sets up a particle x,y startung pos, text the value to display, p and object to hold the data function createParticle(x,y,text,p){ p.life = 1; // when this get down to zero it is dead px = x; py = y; p.text = text; return p; } // ease functions var easeBell = function (x, pow) { // x 0-1 pos > 0 x = x * 2; if( x > 1){ x = 1 - (x - 1); var xx = Math.pow(x,pow); return xx / (xx + Math.pow(1 - x, pow)); }else{ var xx = Math.pow(x,pow); return xx / (xx + Math.pow(1 - x, pow)); } } var ease = function (x, pow) { // x 0-1 pos > 0 var xx = Math.pow(x,pow); return xx / (xx + Math.pow(1 - x, pow)); } function updateParticles(){ // update the life and death of the particles for(var i = 0; i < particles.length; i ++){ var p = particles[i]; p.life -= LIFETIME; if(p.life <= 0){ // time is up this particle is dead // move it to the grave particlePool.push(p); particles.splice(i,1); // remove it from the array i -= 1; // adjust i so we dont skip any } } } function renderParticles(){ ctx.font = "20px Comic Sans MS" ctx.fillStyle = "#F00"; for(var i = 0; i < particles.length; i ++){ // for each active particle var p = particles[i]; var fadeCurveVal = 1- p.life; fadeCurveVal *= (1 - FADE_CURVE_ADVANCE); // scale it down fadeCurveVal += FADE_CURVE_ADVANCE; // move it forward ctx.globalAlpha = easeBell(fadeCurveVal,FADE_CURVE_SHAPE); // get the fade fx var y = py + ease((1-p.life)/2,MOVE_CURVE_SHAPE) * YDIST * 2; ctx.fillText(p.text,px,y); } } /*===================================================================================== ANSWER code End =====================================================================================*/ /** SimpleFullCanvasMouse.js begin **/ const CANVAS_ELEMENT_ID = "canv"; const U = undefined; var w, h, cw, ch; // short cut vars var canvas, ctx, mouse; var globalTime = 0; var createCanvas, resizeCanvas, setGlobals; var L = typeof log === "function" ? log : function(d){ console.log(d); } createCanvas = function () { var c,cs; cs = (c = document.createElement("canvas")).style; c.id = CANVAS_ELEMENT_ID; cs.position = "absolute"; cs.top = cs.left = "0px"; cs.zIndex = 1000; document.body.appendChild(c); return c; } resizeCanvas = function () { if (canvas === U) { canvas = createCanvas(); } canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx = canvas.getContext("2d"); if (typeof setGlobals === "function") { setGlobals(); } } setGlobals = function(){ cw = (w = canvas.width) / 2; ch = (h = canvas.height) / 2; } mouse = (function(){ function preventDefault(e) { e.preventDefault(); } var mouse = { x : 0, y : 0, w : 0, alt : false, shift : false, ctrl : false, buttonRaw : 0, over : false, // mouse is over the element bm : [1, 2, 4, 6, 5, 3], // masks for setting and clearing button raw bits; mouseEvents : "mousemove,mousedown,mouseup,mouseout,mouseover,mousewheel,DOMMouseScroll".split(",") }; var m = mouse; function mouseMove(e) { var t = e.type; mx = e.offsetX; my = e.offsetY; if (mx === U) { mx = e.clientX; my = e.clientY; } m.alt = e.altKey; m.shift = e.shiftKey; m.ctrl = e.ctrlKey; if (t === "mousedown") { m.buttonRaw |= m.bm[e.which-1]; } else if (t === "mouseup") { m.buttonRaw &= m.bm[e.which + 2]; } else if (t === "mouseout") { m.buttonRaw = 0; m.over = false; } else if (t === "mouseover") { m.over = true; } else if (t === "mousewheel") { mw = e.wheelDelta; } else if (t === "DOMMouseScroll") { mw = -e.detail; } if (m.callbacks) { m.callbacks.forEach(c => c(e)); } e.preventDefault(); } m.addCallback = function (callback) { if (typeof callback === "function") { if (m.callbacks === U) { m.callbacks = [callback]; } else { m.callbacks.push(callback); } } else { throw new TypeError("mouse.addCallback argument must be a function"); } } m.start = function (element, blockContextMenu) { if (m.element !== U) { m.removeMouse(); } m.element = element === U ? document : element; m.blockContextMenu = blockContextMenu === U ? false : blockContextMenu; m.mouseEvents.forEach( n => { m.element.addEventListener(n, mouseMove); } ); if (m.blockContextMenu === true) { m.element.addEventListener("contextmenu", preventDefault, false); } } m.remove = function () { if (m.element !== U) { m.mouseEvents.forEach(n => { m.element.removeEventListener(n, mouseMove); } ); if (m.contextMenuBlocked === true) { m.element.removeEventListener("contextmenu", preventDefault);} m.element = m.callbacks = m.contextMenuBlocked = U; } } return mouse; })(); var done = function(){ window.removeEventListener("resize",resizeCanvas) mouse.remove(); document.body.removeChild(canvas); canvas = ctx = mouse = U; L("All done!") } resizeCanvas(); // create and size canvas mouse.start(canvas,true); // start mouse on canvas and block context menu window.addEventListener("resize",resizeCanvas); // add resize event function update(timer){ // Main update loop globalTime = timer; display(); // call demo code // continue until mouse right down if (!(mouse.buttonRaw & 4)) { requestAnimationFrame(update); } else { done(); } } requestAnimationFrame(update); /** SimpleFullCanvasMouse.js end **/