텍스트를 페이드 아웃하고 다음 캔버스에서 페이드 아웃

Question

텍스트가 표시되는 게임이있는 캔버스가 있지만 게임을 한 적이 있다면 클릭 커 Heros 클릭하면 손상 텍스트가 표시되지만 밖으로 천천히 및 머 금고 및 페이드 아웃 내가 여기에 같은 효과

을 생산하고 싶습니다 그래서 내가 가지고있는 것은 호출되는 함수는 사용자가 터미널을 클릭 할 때 나는를 생산하는 텍스트를 필요로하면서 좀 위로 이동 비슷한 동작이지만 캔버스에 익숙하지 않은 이유와 현재 코드가 무엇인지 잘 모르겠습니다.

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

입자 시스템이 필요합니다. 코드 상단의 Bellow는 간단하고 메모리 효율적인 파티클 시스템을 수행하는 데 필요한 것입니다. 파티클 풀을 사용합니다. 죽은 입자는 시간이 다되면 수영장으로갑니다. 새로운 파티클이 필요할 때, 죽은 것들이 수영장에 있는지 확인하십시오. 만약 부활했다면, 새 것을 만듭니다. 그렇지 않으면 새로운 것을 만듭니다. 이렇게하면 입자 시스템이 작업을 매우 어렵게 만들 수 있다는 두려운 GC 지연을 피할 수 있습니다.

particle을 렌더링하는 데 fillText (매우 느리기 때문에)를 사용하지 않고 drawImage를 미리 렌더링하고 사용하는 것이 좋습니다. 너까지.

죄송합니다 나는

/*===================================================================================== 
 
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 
 
    p.x = x; 
 
    p.y = 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 = p.y + ease((1-p.life)/2,MOVE_CURVE_SHAPE) * YDIST * 2; 
 
     ctx.fillText(p.text,p.x,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; 
 
     m.x = e.offsetX; m.y = e.offsetY; 
 
     if (m.x === U) { m.x = e.clientX; m.y = 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") { m.w = e.wheelDelta; } 
 
     else if (t === "DOMMouseScroll") { m.w = -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 **/