2017-04-01 5 views
0

私はhereと似たアニメーションワードウェブをデザインしようとしています。目標は、1つの場所に固定された中央の単語の吹き出しを持ち、周囲に移動する他の単語の吹き出しを持つことです。アニメーションWord Web in Javascript

私はchartjsのバブルチャートをベースとしてバブルを得るために凡例、グリッドライン、軸などを削除したいと考えていました。ただし、ドキュメントに含まれているツールチップを除いて、私は気泡の1つにテキストを追加する方法を見つけることができませんでした。気泡の中にテキストを追加して、それが常に見えるようにする方法はありますか?または、誰でもこれを達成するためのより良い図書館の方向に私を指摘できますか?

答えて

0

私は狂っていますが、私はCanvasでそれをコード化しました。退屈なハハだった。新しいhtmlファイルに貼り付けることでそれをテストします:D新しいテキストで、パラメータ、色、形、新しい泡で遊ぶことができます。楽しむ!

<!DOCTYPE html> 
    <html> 

    <head> 
     <title></title> 

    </head> 

<body> 
    <canvas id="canvas"></canvas> 

    <script> 
     var canvas = document.getElementById("canvas"); 
     var ctx = canvas.getContext("2d"); 
     canvas.width = 400; 
     canvas.height = 400; 
     var r = 0; 


     var bubbles = []; 

     bubbles.push(new Bubble(canvas.width/2, canvas.height/2, "Apple", "rgb(0,0,120)", 30, 20)); 
     bubbles.push(new Bubble(canvas.width/2 + 100, canvas.height/2, "Store", "rgb(0,0,200)", 30, 20)); 
     bubbles.push(new Bubble(canvas.width/2 - 100, canvas.height/2, "Ipad", "rgb(0,0,200)", 30, 20)); 
      bubbles.push(new Bubble(canvas.width/2, canvas.height/2 + 100, "iMac", "rgb(120,0,0)", 30, 20)); 



     setInterval(function(){update();}, 20); 

     function update() 
     { 
      ctx.clearRect(0,0,canvas.width, canvas.height); 
      for (var i=bubbles.length-1; i>=0; i--) 
      { 
       bubbles[i].update(); 

      } 
     } 

    function Vector(x,y) 
    { 
     this.x = x; 
     this.y = y; 

     this.startX = x; 
     this.startY = y; 

     this.add = function (v) 
     { 
      this.x += v.x; 
      this.y += v.y; 
     } 

     this.mult = function(p) 
     { 
      this.x *= p; 
      this.y *= p; 
     } 

     this.rotate = function(ang) 
     { 
     this.x = (this.startX - bubbles[0].position.x) * Math.cos(ang) 
         - (this.startY - bubbles[0].position.y) * Math.sin(ang) 
         + bubbles[0].position.x; 

     this.y = (this.startX - bubbles[0].position.x) * Math.sin(ang) 
         + (this.startY - bubbles[0].position.y) * Math.cos(ang) 
         + bubbles[0].position.y; 
     } 

    } 


    function Bubble(x,y,text, color, width, height) 
    { 
     this.position = new Vector(x,y); 
     this.velocity = new Vector(0,0); 
     this.acceleration = new Vector(0,0); 

     this.text = text; 
     this.color = color; 

     this.width = width; 
     this.height = height; 

     this.draw = function() 
     { ctx.beginPath(); 

       if(this.text != "Apple") 
       { 
        ctx.lineTo(bubbles[0].position.x, bubbles[0].position.y); 
       } 
      ctx.font = "bold 13pt Arial"; 
      ctx.fillStyle = this.color; 
      ctx.strokeStyle = this.color; 
       ctx.arc(this.position.x,this.position.y, this.width, 0, 2 * Math.PI, false); 
       ctx.fill(); 
       ctx.fillStyle = "black"; 


       ctx.stroke(); 
       ctx.fillText(this.text, this.position.x - this.width/2 - 6, this.position.y + this.height/4); 
     } 

     this.update = function() 
     { 
       if(this.text != "Apple") 
      { 
       r--; 
       if (r < -1440) 
       r = 1; 

       this.position.rotate(Math.PI/720 * r); 



      } 
       this.draw(); 
     } 
    } 







    </script> 
</body> 

</html> 
+0

あなた自身でこれらの泡の中に単語を配置してください;) – 5ka