0

ooookay..这整个 html5 画布 jive 对我来说是全新的。

所以我想做的是让一个“像素”在屏幕上移动，后面有一个附加的尾巴，到某个点，然后让像素仍然“移动”，但让尾巴的内容滚动出去。

我真的希望我以体面的方式描述了这一点。我从昨天早上开始就一直在尝试解决这个问题，但它只是没有发生......这里有一些代码：

rando=function(n){
  return Math.round(Math.random()*n);
}

pencil=function(id){
  this.neon=new Array();
  this.neon[0]="#00FF00";
  this.neon[1]="#00FF33";
  this.neon[2]="#00FF66";
  this.neon[3]="#33FF00";

  this.id=id;
  this.x=0;
  var me=this;

  this.paper=document.createElement("canvas");
  this.paper.id=id+"_paper";
  this.paper.width=100;
  this.paper.height=300;
  document.body.appendChild(this.paper);

  this.dot=this.paper.getContext("2d");
  this.dot.beginPath();
  this.dot.lineWidth=1;
  this.dot.strokeStyle = this.neon[rando(this.neon.length)];
  //this.img=this.dot.getImageData(0,0,this.paper.width,this.paper.height);

  this.drawr=function(){
    if(this.x==0){
      this.y=rando(300)+.5;
      this.dot.moveTo(this.x,this.y);
      this.count=0;
    }
    this.x+=1;
    this.count+=1;
    if(this.count==20){
      this.count=0;
      this.y+=rando(2)-1;
    }

    this.dot.lineTo(this.x,this.y);

    if(this.x>49){
      //this.paper.width=this.paper.width;
      //this.paper.height=this.paper.height;
      //this.dot.putImageData(this.img, (this.x-50)*-1, 0);
      //this.dot.translate(-1,0);
    }
    this.dot.stroke();
    setTimeout(function(){ me.drawr(); },rando(50)+10);
  };
}

window.onload=function(){
  var line=new Array();
  for(var i=0;i<5+rando(15);i++){
    line[i]=new pencil(i);
    line[i].drawr();
  }
}

我尝试过翻译、绘制图像、放置图像数据和许多其他的东西，但没有任何效果..也许我正在接近这个完全错误的东西还是什么？任何有关解决此问题的不同方法的建议也可能有所帮助，感谢您的帮助！

4

2 回答 2

0

这看起来像你想要的吗？http://jsfiddle.net/Y8rzX/

于 2012-10-03T01:44:35.113 回答
0

我对您使用来自其他问题的信息和更多外包帮助的信息有了基本的了解 - 以及一些可怕的编码工作。

我仍在尝试找出一些随机细节以及它实际上是如何工作的，所以我无法详细回答它是如何工作的，但对于任何感兴趣的人，这里是 HTML 文档（或这里的jsFiddle）：

<!DOCTYPE html>
<html>
<head>
<title>bored...</title>

<script type="text/javascript"><!--
rando=function(n){
  return Math.round(Math.random()*n);
}

pencil=function(id,w,h){
  this.neon=new Array();
  this.neon[0]="#FFFF00";
  this.neon[1]="#FFFF33";
  this.neon[2]="#F2EA02";
  this.neon[3]="#E6FB04";
  this.neon[4]="#FF0000";
  this.neon[5]="#FD1C03";
  this.neon[6]="#FF3300";
  this.neon[7]="#FF6600";
  this.neon[8]="#00FF00";
  this.neon[9]="#00FF33";
  this.neon[10]="#00FF66";
  this.neon[11]="#33FF00";
  this.neon[12]="#00FFFF";
  this.neon[13]="#099FFF";
  this.neon[14]="#0062FF";
  this.neon[15]="#0033FF";
  this.neon[16]="#FF00FF";
  this.neon[17]="#FF00CC";
  this.neon[18]="#FF0099";
  this.neon[19]="#CC00FF";
  this.neon[20]="#9D00FF";
  this.neon[21]="#CC00FF";
  this.neon[22]="#6E0DD0";
  this.neon[23]="#9900FF";

  this.id=id;
  this.x=0;
  this.y=0;
  this.w=w;
  this.h=h;
  var me=this;

  this.paper=document.createElement("canvas");
  this.paper.id=id+"_paper";
  this.paper.width=this.w;
  this.paper.height=this.h;
  this.paper.style.position = "absolute";
  document.body.appendChild(this.paper);

  this.dot=this.paper.getContext("2d");
  this.dot.beginPath();
  this.dot.lineWidth=1;
  this.dot.strokeStyle=this.neon[rando(this.neon.length-1)];

  this.drawr=function(){
    if(this.x==0){
      this.y=rando(this.h)+.5;                        //+.5???
      this.dot.moveTo(this.x,this.y);
      this.count=0;
    }
    this.x+=1;
    this.count+=1;
    if(this.count==10){
      this.dot.beginPath();
      this.count=0;
      this.y+=rando(2)-1;
      this.dot.moveTo(this.x-1,this.y);                    //-1????
    }
    if(this.x>=this.w-1){
      this.x=this.w-1;                            //-1???
      this.dot.moveTo(this.x-2,this.y);                    //-2????????
      this.img=this.dot.getImageData(1,0,this.w,this.h);
      this.dot.putImageData(this.img, 0, 0);
    }

    if(this.y<0){ this.y=rando(2)+1.5; }                //.5?
    if(this.y>this.h){ this.y=this.h+(rando(2)+1.5)*-1; }        //.5?

    this.dot.lineTo(this.x,this.y);
    this.dot.stroke();
    setTimeout(function(){ me.drawr(); },10);
  };
}

window.onload=function(){
  var line=new Array();
  for(var i=0;i<5+rando(10);i++){
    line[i]=new pencil(i,200,100);
    line[i].drawr();
  }
}
//--></script>

<style><!--
body{
  background:#000000;
}
//--></style>

</head>

<body>
</body>
</html> ​
于 2012-10-03T23:19:36.337 回答