0
我想設計一個類似於here的動畫詞網頁。目標是讓一箇中心詞泡泡固定在一個位置,並讓周圍的其他文字泡泡四處移動。Javascript中的動畫詞網頁
我希望能夠使用chartjs的氣泡圖作爲基礎,並刪除圖例,網格線,軸等來獲取氣泡。但是除了文檔中包含的工具提示外,我還沒有找到添加文本到其中一個氣泡的方法。有沒有辦法在泡泡內添加文字,以便始終可見?或者任何人都可以指向一個更好的圖書館來完成這個任務嗎?
我想設計一個類似於here的動畫詞網頁。目標是讓一箇中心詞泡泡固定在一個位置,並讓周圍的其他文字泡泡四處移動。Javascript中的動畫詞網頁
我希望能夠使用chartjs的氣泡圖作爲基礎,並刪除圖例,網格線,軸等來獲取氣泡。但是除了文檔中包含的工具提示外,我還沒有找到添加文本到其中一個氣泡的方法。有沒有辦法在泡泡內添加文字,以便始終可見?或者任何人都可以指向一個更好的圖書館來完成這個任務嗎?
我很瘋狂,但我編碼在帆布。很無聊哈哈。通過粘貼到一個新的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>
試着將這些氣泡中的詞置於中心位置;) – 5ka