Javascript中的動畫詞網頁

我想設計一個類似於here的動畫詞網頁。目標是讓一箇中心詞泡泡固定在一個位置，並讓周圍的其他文字泡泡四處移動。Javascript中的動畫詞網頁

我希望能夠使用chartjs的氣泡圖作爲基礎，並刪除圖例，網格線，軸等來獲取氣泡。但是除了文檔中包含的工具提示外，我還沒有找到添加文本到其中一個氣泡的方法。有沒有辦法在泡泡內添加文字，以便始終可見？或者任何人都可以指向一個更好的圖書館來完成這個任務嗎？

來源

2017-04-01 AerialAbhorsen

我很瘋狂，但我編碼在帆布。很無聊哈哈。通過粘貼到一個新的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>

來源

2017-04-01 20:56:18 5ka

試着將這些氣泡中的詞置於中心位置;） – 5ka

Javascript中的動畫詞網頁

回答

相關問題