HTML5 Canvas淡入淡出文本，不起作用

我試圖弄亂html5 canvas並淡入淡出文本。當我做這件事時，它從不保留畫布上的其他東西可見。我想淡入淡出的文字卻沒有出現。我想我可以使用ctx.save（）和ctx.restore（）來解決這個問題，但無濟於事我無能爲力。HTML5 Canvas淡入淡出文本，不起作用

這是我使用的代碼。

<html> 
    <head> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script type="text/javascript"> 


    var canvas, ctx, step = 50, steps = 255; 
    var delay = 20; 
    var rgbstep = 50; 


    function init() { 
     canvas = document.getElementById("myCanvas"); 
     ctx = canvas.getContext("2d"); 

     // Fire text 
     ctx.font = "Bold 160pt Trebuchet MS"; 
     ctx.fillStyle = "#8DC63F"; 
     ctx.fillText('F', 350, 195); 
     ctx.font = "Bold 120pt Trebuchet MS"; 
     ctx.fillStyle = "#8DC63F"; 
     ctx.fillText('IRE', 469, 195); 


     //Fly text 
     ctx.font = "Bold 160pt Trebuchet MS"; 
     ctx.fillStyle = "#A7A9AC"; 
     ctx.fillText('F', 705, 195); 
     ctx.font = "Bold 120pt Trebuchet MS"; 
     ctx.fillStyle = "#A7A9AC"; 
     ctx.fillText('LY', 825, 195); 
     ctx.save(); 

     var img = new Image(); 
     img.src = 'logo/firefly.png'; 

     img.onload = function() { 
      ctx.drawImage(img, 0, 0); 
     }; 

     Textfadeup(); 
    } 

    function Textfadeup() { 
     rgbstep++; 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     ctx.font = "43pt Tahoma"; 
     ctx.fillStyle = "rgb(" + rgbstep + "," + rgbstep + "," + rgbstep + ")"; 
     ctx.fillText('innovative technologies', 379, 255); 
     ctx.restore(); 
     if (rgbstep < 255) { 
      var t = setTimeout('Textfadeup()', 10); 
     } 
     if (rgbstep == 255) { 
      Textfadedown(); 
     } 
    } 

    function Textfadedown() { 
     rgbstep = rgbstep-1; 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     ctx.font = "43pt Tahoma"; 
     ctx.fillStyle = "rgb(" + rgbstep + "," + rgbstep + "," + rgbstep + ")"; 
     ctx.fillText('innovative technologies', 379, 255); 
     ctx.restore(); 
     if (rgbstep > 80) { 
      var t = setTimeout('Textfadedown()', 10); 
     } 
     if (rgbstep == 80) { 
      Textfadeup(); 
     } 
    } 

    </script> 
</head> 

<body onload="init();"> 
    <canvas id="myCanvas" width="1500" height="500"> 

</canvas> 


    </body> 
</html>

任何代碼片段，我可以制定出來，或指出我犯我的錯誤將有所幫助。

來源

2015-10-01 user1556744

jsfiddle ??????????? – gsiradze

你需要先定義你的淡入淡出功能，看看我提供的答案 – Canvas

在你的代碼的幾個問題：
•首先，重複使用代碼來提高可讀性/減少錯誤/ ...
•使用駱駝外殼。
•確保在啓動應用程序之前加載了任何圖像。

然後你必須知道畫布沒有什麼「記憶」你畫的東西。所以如果你清除了一個畫布，你必須再次畫出一切。
不要因保存/恢復而感到困惑：它們在這裏保存/恢復繪圖上下文，這意味着上下文具有的各種顏色，線寬，變換，字體......設置，而不是其實際（像素）內容。

以下代碼顯示瞭如何組織代碼以獲取所需結果。

var canvas, ctx, step = 50, 
 
    steps = 255; 
 
var delay = 10; 
 
var rgbstep = 50; 
 

 
var img = new Image(); 
 
img.src = 'http://i.stack.imgur.com/Eisr7.png'; 
 
img.onload = init; 
 

 
var fonts = ['Trebuchet MS', 'Tahoma']; 
 

 
function init() { 
 
    canvas = document.getElementById("myCanvas"); 
 
    ctx = canvas.getContext("2d"); 
 
    textFadeUp(); 
 
} 
 

 
function drawFire() { 
 
    drawText('F', 350, 195, "#8DC63F", 0, 160, 'Bold'); 
 
    drawText('IRE', 469, 195, "#8DC63F", 0, 120, 'Bold'); 
 
} 
 

 
function drawFly() { 
 
    drawText('F', 705, 195, "#A7A9AC", 0, 160, 'Bold'); 
 
    drawText('ly', 825, 195, "#A7A9AC", 0, 120, 'Bold'); 
 
} 
 

 
function drawImage() { 
 
    ctx.drawImage(img, 100, 100); 
 
} 
 

 
function clearCanvas() { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
} 
 

 
function drawScene() { 
 
    clearCanvas(); 
 

 
    drawImage(); 
 

 
    drawFire(); 
 
    drawFly(); 
 

 
    drawText('innovative technologies', 379, 255, getGray(rgbstep), 1, 43); 
 

 
} 
 

 
function textFadeUp() { 
 
    rgbstep++; 
 

 
    drawScene(); 
 

 
    if (rgbstep < 255) { 
 
    var t = setTimeout(textFadeUp, delay); 
 
    } 
 
    if (rgbstep == 255) { 
 
    textFadeDown(); 
 
    } 
 
} 
 

 
function textFadeDown() { 
 
    rgbstep = rgbstep - 1; 
 

 
    drawScene(); 
 

 
    if (rgbstep > 80) { 
 
    var t = setTimeout(textFadeDown, delay); 
 
    } 
 
    if (rgbstep == 80) { 
 
    textFadeUp(); 
 
    } 
 
} 
 

 
// -------------------------------------- 
 

 
function drawText(txt, x, y, color, whichFont, fontSize, fontStrength) { 
 
    fontStrength = fontStrength || ''; 
 
    ctx.font = fontStrength + ' ' + fontSize + 'pt ' + fonts[whichFont]; 
 
    ctx.fillStyle = color; 
 
    ctx.fillText(txt, x, y); 
 
} 
 

 
function getGray(grayLevel) { 
 
    return "rgb(" + grayLevel + "," + grayLevel + "," + grayLevel + ")" 
 
}

<canvas id="myCanvas" width="1500" height="500">

請注意，如果你的數學/罪不害怕，你可以用一個簡單的振盪器功能簡化代碼：

function osc(min, max, freq) { 
    return min + 0.5*(max-min)*(1 + Math.sin(2*Math.PI*freq*Date.now()/1000)); 
}

var canvas, ctx; 
 

 
var img = new Image(); 
 
img.src = 'http://i.stack.imgur.com/Eisr7.png'; 
 
img.onload = init; 
 

 
var fonts = ['Trebuchet MS', 'Tahoma']; 
 

 
function init() { 
 
    canvas = document.getElementById("myCanvas"); 
 
    ctx = canvas.getContext("2d"); 
 
    setInterval(drawScene, 20); 
 
} 
 

 
function drawFire() { 
 
    drawText('F', 350, 195, "#8DC63F", 0, 160, 'Bold'); 
 
    drawText('IRE', 469, 195, "#8DC63F", 0, 120, 'Bold'); 
 
} 
 

 
function drawFly() { 
 
    drawText('F', 705, 195, "#A7A9AC", 0, 160, 'Bold'); 
 
    drawText('ly', 825, 195, "#A7A9AC", 0, 120, 'Bold'); 
 
} 
 

 
function draw_inn_tech() { 
 
    var rgbStep = Math.floor(osc(80, 255, 0.5)); 
 
    drawText('innovative technologies', 379, 255, getGray(rgbStep), 1, 43); 
 
} 
 

 
function drawImage() { 
 
    ctx.drawImage(img, 100, 100); 
 
} 
 

 
function clearCanvas() { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
} 
 

 
function drawScene() { 
 
    clearCanvas(); 
 
    drawImage(); 
 
    drawFire(); 
 
    drawFly(); 
 
    draw_inn_tech(); 
 
} 
 

 
// -------------------------------------- 
 

 
function drawText(txt, x, y, color, whichFont, fontSize, fontStrength) { 
 
    fontStrength = fontStrength || ''; 
 
    ctx.font = fontStrength + ' ' + fontSize + 'pt ' + fonts[whichFont]; 
 
    ctx.fillStyle = color; 
 
    ctx.fillText(txt, x, y); 
 
} 
 

 
function getGray(grayLevel) { 
 
    return "rgb(" + grayLevel + "," + grayLevel + "," + grayLevel + ")" 
 
} 
 

 
function osc(min, max, freq) { 
 
    return min + 0.5 * (max - min) * (1 + Math.sin(2 * Math.PI * freq * Date.now()/1000)); 
 
}

<canvas id="myCanvas" width="1500" height="500">

來源

2015-10-01 09:56:33 GameAlchemist

HTML5 Canvas淡入淡出文本，不起作用

回答

相關問題