0

うーん、この html5 キャンバス ジャイブ全体は、私にとってまったく新しいものです。

そのため、私がやろうとしているのは、「ピクセル」を画面上で移動させ、その後ろに追加の尾を付けて、特定のポイントまで移動させ、ピクセルがまだ「移動」しているが、尾の内容をスクロールさせることです。

まともな方法でそれを説明したことを本当に願っています。昨日の朝からこれを理解しようとしてきましたが、それは起こっていません........コードは次のとおりです。

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

私はあなたが何をしようとしているのかについての基本的な考えを得ました.

私はまだいくつかのランダムな詳細とそれが実際にどのように機能しているかを理解しようとしているので、これがどのように機能するかについて詳細な答えを出すことはできませんが、興味のある人のために、ここに 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 に答える
0

これはあなたが持ちたいもののように見えますか？http://jsfiddle.net/Y8rzX/

于 2012-10-03T01:44:35.113 に答える