Javascript HTML5画布上的文本和动画

我有一个基于动画的画布，在mouseover上为雨滴设置动画，动画在mouseout上停止。我有一个文本框，提交时应该在画布上显示文本。然而，当我再次移动鼠标时，这个文本消失了。我知道画布是在鼠标上方重新绘制的，但我不知道如何使文本保持原样。谢谢

我已根据此处提供的解决方案改编了代码=>

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);
}

var-ctx；
var-imgBg；
var-imgDrops；
var x=0；
var y=0；
var noOfDrops=7；
var fallingDrops=[]；
var-intV；
imgBg=新图像（）；
imgBg.src=“image.jpg”；
var canvas=document.getElementById（'canvasRegn'）；
ctx=canvas.getContext（'2d'）；
ctx.drawImage（imgBg，0,0600450）//背景
函数绘图（）{
ctx.drawImage（imgBg，0，0600450）；//背景
对于（变量i=0；i450）{//当雨滴落在视野之外时，重复雨滴
fallingDrops[i].y=-120；//说明图像大小
fallingDrops[i].x=Math.random（）*600；//使其沿宽度随机显示
}
}
}
函数设置（）{
intV=setInterval（函数（）{draw（）}，36）；
对于（变量i=0；i

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>

<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>

提交

每次重新绘制画布时，如果需要重新绘制文本框，我会亲自重命名“clicked（）”，并从内部调用它“draw（）”（在拖放之前或之后，取决于您希望它显示在上方还是下方）

您还必须从“clicked（）”中删除ctx.clearRect（），否则它将覆盖rain（如果您将其放在顶部）

然后您需要编辑它的调用方式，clicked（）函数可以设置一个布尔变量，该变量在draw函数中被选中（如果为true，则绘制文本框）

伪代码示例：

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

然后，如果希望文本框可编辑，可以在drawText（）中使用变量而不是固定值，例如

在drawText（）之外

在drawText（）中

---

这个问题的答案在于铺设两层帆布。第一个画布层将具有背景图像和动画效果。它上面的第二层将绘制文本。 注意：@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>

scripttype=“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”；
fillcolor=“黄色”；
strokeColour=“绿色”；
imgBg=新图像（）；
imgBg.src=“image.jpg”；
var canvas=document.getElementById（'myCanvas'）；
ctx=canvas.getContext（'2d'）；
ctx.drawImage（imgBg，0,0600400）//背景
var canvas2=document.getElementById（'drawText'）；
ctx2=canvas2.getContext（'2d'）；
函数图（）{
ctx.drawImage（imgBg，0,0600400）；//背景
}
函数绘图（）{
ctx.drawImage（imgBg，0，0600400）；//背景
对于（变量i=0；i400）{//当雨滴落下时，重复雨滴
fallingDrops[i].y=-120；//说明图像大小
fallingDrops[i].x=Math.random（）*600；//使其沿宽度随机显示
}
}       
}
函数设置（）{
intV=setInterval（函数（）{draw（）}，36）；
对于（变量i=0；i

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>

<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>

我想到了这一点，但当您更改消息（即提交第二条消息）时，这会与第一条消息混淆。这是唯一的问题。啊，那么你想看到多个文本框？你的意思是，当你不想让它们重叠时，它们会彼此重叠吗？是的，当我提交第二条消息时，第一条消息应该被删除而不重叠。我建议的方式不应该允许它们重叠，如果你用同一个函数绘制它们，只需编辑该函数中使用的变量，它就会绘制新的文本框。等一下，我会在答案中添加一些伪代码。我们快到了。1问题是，clicked（）已将text=true设置为true，因此当我输入另一个文本时。当我将鼠标移到t上时，不点击提交按钮