Question

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

我试过翻译，drawimage，putimagedata，以及许多其他的东西，但没有任何工作..可能我接近这完全错误或什么？对于采取不同方式的任何建议也可能有所帮助谢谢你的帮助!!

Answer 1

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

Answer 2

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

我仍然试图找出一些随机细节以及它是如何工作的，所以我不能详细解答它是如何工作的，但对于任何有兴趣的人，这里是HTML文档（或{{3这里）：

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

简单的线条动画不起作用

2 个答案: