抛砖引玉,如何让泡泡中的文字随机变化

原创 15316186307 随笔 js 371阅读 2017-12-22 19:19:25 举报

html 代码

评论 ( 7 )
最新评论
bestime 6F 2017-12-25 08:38:50 7F

1.canvas只能清除画布后重绘。2.咱们每一个字母可以称之为一个对象,一个对象可包含多个属性,你可以给对象取个名字,就可以找到了。

15316186307 5F 2017-12-23 15:46:30 6F

有点像吧,但是我现在还实现不了这个技术。1.canvas好像没有document.removeChild这样的方法,不能把它移除。2.不能把圆圈上的字母跟键盘上的按键联系起来。

bestime 2017-12-23 15:25:28 5F

看了你的评论,感觉在写金山打字通

15316186307 1F 2017-12-22 22:18:40 4F

我的最终的目标是从浏览器的最上方慢慢的下落很多带有字母的圆圈,当我们在键盘上按相应的字母的时候,浏览器对应字母的圆圈就会消失,这样一个简单的游戏。

15316186307 1F 2017-12-22 21:45:40 3F



15316186307 2017-12-22 21:44:55 2F

html 代码

folat 2017-12-22 21:36:29 1F

你颜色都能随机,那随机文字不是一个道理吗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
{
margin:0px;padding:0px;
}
body{
width:100%;height:100%;overflow:hidden;
}
</style>
<script>
function st() {
var b = ["a","b","c","d","e"];
return b[Math.floor(Math.random()
5)];
}
function rgb(){
color="0123456789abcdef"
str="#";
for(i=0;i<6;i++){
str+=color.charAt(Math.random()*16);
}
return str;
}
window.onload=function(){
timer=null;
canvas=document.getElementById("mycanvas")
w=canvas.width=window.innerWidth;
h=canvas.height=window.innerHeight;
ctx=canvas.getContext("2d");
function Ball(){};
Ball.prototype={
init:function(){

    this.r=Math.random()*30+30;
    this.x=this.r+Math.random()*(w-2*this.r);
    this.y=this.r;
    this.bc=rgb();
   this.speedy=Math.random()*5+1;

    this.st=st();
},
draw:function(){

 ctx.beginPath();
 ctx.fillStyle=this.bc;
 ctx.arc(this.x,this.y,this.r,0,360);

 ctx.fill();
 ctx.beginPath();
 ctx.fillStyle="black";
 ctx.font = 'bold 24px Arial';

    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(this.st, this.x ,this.y);
 ctx.fill();
},
update:function(){

     this.y+=this.speedy;
      this.draw();
}

}
a=[];
function create(){
ball=new Ball();
ball.init();
ball.draw();
ball.update();
a.push(ball);

}

timer=setInterval(function(){
    create();
    ctx.clearRect(0,0,w,h);
    for(b of a){
   b.update();
                }
    },1000/4);

}
</script>

</head>
<body>
<canvas id="mycanvas"></canvas>
</body>
</html>