HTML5画布上的文本和动画
Text and animation together on HTML5 canvas
我有一个基于动画的画布,它在mouseover上为雨滴设置动画,在mouseout上停止动画。我有一个文本框,在提交时应该在画布上显示文本。然而,当我移动并再次鼠标悬停时,此文本将消失。我知道画布是在鼠标悬停时重新绘制的,但我不知道如何使文本保持原样。谢谢!
我已根据此处提供的解决方案调整了代码=>画布上像雨一样落下的随机图像(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>
每次你重新绘制画布时,你都需要重新绘制文本框,我会亲自重命名"clicked()",并从内部将其称为"draw()"(在拖放之前或之后,取决于你想让它出现在上面还是下面)
你还必须从"clicked()"中删除ctx.clearRect(),否则它会覆盖雨水(如果你把它放在上面)
然后你需要编辑它的调用方式,clicked()函数可以设置一个布尔变量,该变量在draw函数中被选中(如果为true,则绘制文本框)
伪代码示例:
var text = false
draw(){
drawRain()
if(text == true){drawText()}
}
clicked(){
text = true
}
然后,如果您希望文本框是可编辑的,您可以在drawText()中使用变量而不是固定值,例如
绘图外文本()
fontVar = "36px Verdana";
fillColour = "yellow";
strokeColour = "green";
绘图内部文本()
ctx.font=fontVar;
ctx.fillStyle=fillColour;
ctx.strokeStyle=strokeColour;
这个问题的答案在于铺设两个画布层。第一个画布层将具有背景图像和动画效果。它上面的第二层将绘制文本。注:感谢@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
如何将两块大小相同的画布叠放在一起?
相关文章:
- 创建一致的简单横幅文本动画
- 试图弄清楚某个网站的文本动画是否是用某个库或插件完成的
- 拆分襟翼文本动画 Jquery
- 带有文本动画和自动播放的Jquery滑块
- 需要 Jquery 文本动画自定义帮助
- Jquery 文本动画
- Javascript/jQuery文本动画性能缓慢
- 你能解决我的JQuery文本动画错误吗,导致错误的文本改变外观
- 使用jquery在连续循环中从左到右的文本动画
- Jquery文本动画,从一个到另一个的tween或shaping
- 设置文本动画,使其从下到上显示html/css
- 滚动控制的文本动画
- 我需要文本动画的例子动态添加到一个Div
- 逐字的复杂文本动画
- 重新创建文本动画(源代码)
- jQuery文本动画幻灯片
- Jquery文本动画
- 鼠标悬停时文本动画,鼠标离开时停止并重置
- 用Raphael javascript库中的文本动画矩形
- d3.js渐变文本动画不工作后的selectAll与数据