HTML5畫布上的文本和動畫一起

Question

我有一個基於動畫的畫布，在鼠標懸停時會動畫雨滴，動畫會在鼠標懸停時停止。 我有一個文本框，在提交時應該在畫布上顯示文本。 但是，當我移開並再次將鼠標懸停在此處時，此文本消失。 我知道畫布會在鼠標懸停時重繪，但是我無法弄清楚如何使文本保留在原處。 謝謝！

我已經根據此處提供的解決方案改編了代碼=> 隨機圖像像雨水一樣落在畫布上（Javascript）

使用Javascript

var ctx;
var imgBg;
var imgDrops;
var x = 0;
var y = 0;
var noOfDrops = 7;
var fallingDrops = [];
var intV;

imgBg = new Image();
imgBg.src = "image.jpg";
var canvas = document.getElementById('canvasRegn');
ctx = canvas.getContext('2d');
ctx.drawImage(imgBg,0,0,600,450); //Background

function draw() {
    ctx.drawImage(imgBg, 0, 0,600,450); //Background

    for (var i=0; i< noOfDrops; i++)
    {
    ctx.drawImage (fallingDrops[i].image, fallingDrops[i].x, fallingDrops[i].y); //The rain drop

    fallingDrops[i].y += fallingDrops[i].speed;
    fallingDrops[i+4].x += fallingDrops[i].speed-1;//Set the falling speed
    if (fallingDrops[i].y > 450) {  //Repeat the raindrop when it falls out of view
    fallingDrops[i].y = -120; //Account for the image size
    fallingDrops[i].x = Math.random() * 600;    //Make it appear randomly along the width    
    }

    }
}

function setup() {

    intV = setInterval(function(){draw()}, 36);
    for (var i = 0; i < noOfDrops; i++) {
        var fallingDr = new Object();
        fallingDr["image"] =  new Image();
        fallingDr.image.src = "Rain.svg";       
        fallingDr["x"] = Math.random() * 600;
        fallingDr["y"] = Math.random() * 5;
        fallingDr["speed"] = 3 + Math.random() * 5;
        fallingDrops.push(fallingDr);

        }
}
function start(){
setup();
}

function stop(){
    clearInterval(intV);
}

function clicked(){
    var x=document.getElementById("form_val");
    ctx.clearRect(0,0,600,400);
    ctx.font="36px Verdana";
    ctx.fillStyle="yellow";
    ctx.strokeStyle="green";
    ctx.lineWidth=2;
    ctx.strokeText(x.value,200,200);
    ctx.fillText(x.value,200,200);
}

HTML

<canvas id="canvasRegn" width="600" height="450"style="margin:10px;" onmouseover="start()" onmouseout="stop()">
</canvas>
<br>
<input type="text" name="fname" size="50" id="form_val">
<button id="submit" onclick="clicked()">Submit</button>

Answer 1

每次重新繪制畫布時，都需要重新繪制文本框，我個人會重命名“ clicked（）”並從“ draw（）”內部調用它（在拖放之前或之后，具體取決於您希望它顯示在上方還是下方） ）

您還必須從“ clicked（）”中刪除ctx.clearRect（），否則它將覆蓋雨（如果將其放置在頂部）

然后，您需要編輯它的調用方式，clicked（）函數可以設置一個布爾變量，該變量在draw函數中進行檢查（如果為true，則繪制文本框）

偽代碼示例：

var text = false
draw(){
    drawRain()
    if(text == true){drawText()}
}
clicked(){
    text = true
}

然后，如果您希望文本框可編輯，則可以在drawText（）中使用變量代替固定值，例如

在drawText（）之外

fontVar = "36px Verdana";
fillColour = "yellow";
strokeColour = "green";

在drawText（）內部

ctx.font=fontVar;
ctx.fillStyle=fillColour;
ctx.strokeStyle=strokeColour;

Answer 2

這個問題的答案在於鋪設兩個畫布層。 第一畫布層將具有背景圖像和動畫效果。 其頂部的第二層將繪制文本。 注意：感謝@DBS查找解決方案。

JavaScript ：

script type="text/javascript">
var ctx;
var ctx2
var imgBg;
var imgDrops;
var x = 0;
var y = 0;
var noOfDrops = 20;
var fallingDrops = [];
var intV;
fontVar ="36px Verdana";
fillColour="yellow";
strokeColour="green";

imgBg = new Image();
imgBg.src = "image.jpg";
var canvas = document.getElementById('myCanvas');
ctx = canvas.getContext('2d');
ctx.drawImage(imgBg,0,0,600,400); //Background

var canvas2 = document.getElementById('drawText');
ctx2 = canvas2.getContext('2d');

function drawing(){
ctx.drawImage(imgBg,0,0,600,400); //Background
}

function draw() {
    ctx.drawImage(imgBg, 0, 0,600,400); //Background    
    for (var i=0; i< noOfDrops; i++)
    {

    ctx.drawImage (fallingDrops[i].image, fallingDrops[i].x, fallingDrops[i].y,35,35); //The rain drop

    fallingDrops[i].y += fallingDrops[i].speed;
    fallingDrops[i+7].x += fallingDrops[i].speed-1;//Set the falling speed
    if (fallingDrops[i].y > 400) {  //Repeat the raindrop when it falls out of view
        fallingDrops[i].y = -120; //Account for the image size
        fallingDrops[i].x = Math.random() * 600;    //Make it appear randomly along the width    
        }
    }       
}


function setup() {

    intV = setInterval(function(){draw()}, 36);
    for (var i = 0; i < noOfDrops; i++) {
        var fallingDr = new Object();
        fallingDr["image"] =  new Image();
        fallingDr.image.src = "Rain.svg";       
        fallingDr["x"] = Math.random() * 600;
        fallingDr["y"] = Math.random() * 5;
        fallingDr["speed"] = 3 + Math.random() * 5;
        fallingDrops.push(fallingDr);

        }
}
function start(){
setup();
}

function stop(){
    clearInterval(intV);
}

function clicked(){
    z=document.getElementById("form_val");
    ctx2.clearRect(0,0,600,400);
    ctx2.font=fontVar;
    ctx2.fillStyle=fillColour;
    ctx2.strokeStyle=strokeColour;
    ctx2.lineWidth=2;
    ctx2.strokeText(z.value,200,200);
    ctx2.fillText(z.value,200,200);
}

</script>

HTML

<div class="wrapper">
<canvas id="myCanvas" width="600" height="400" style="margin:1px;"></canvas>
<canvas id="drawText" width="600" height="400" onmouseover="start()" onmouseout="stop()</canvas>
</div>
<br>
Greeting Message: <input type="text" name="fname" size="50" id="form_val">
<button id="submit" onclick="clicked()">Add this message</button>
</div>

CSS

如何將兩個相同尺寸的畫布彼此堆疊？