如何使用canvas和javascript繪制Spraling文本？

Question

我正在嘗試在畫布上制作螺旋形文字。 到目前為止，我所能做的只是帶圓圈的文字。 有人可以幫助我處理我的代碼嗎？ 我需要更改使其變成螺旋形而不是圓形嗎？ 這是我的代碼。

 CanvasRenderingContext2D.prototype.fillTextCircle = function(text,x,y,radius,startRotation){ var numRadsPerLetter = 2*Math.PI / text.length; this.save(); this.translate(x,y); this.rotate(startRotation); for(var i=0;i<text.length;i++){ this.save(); this.rotate(i*numRadsPerLetter); this.fillText(text[i],0,-radius); this.restore(); } this.restore(); } var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = "bold 30px Serif"; ctx.fillTextCircle("this is a sample of spiraling text. you can see more examples as we go on",150,150,75,Math.PI / 2);

 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <canvas id="canvas" width="500" height="500"></canvas> <script type="text/javascript"> CanvasRenderingContext2D.prototype.fillTextCircle = function(text,x,y,radius,startRotation){ var numRadsPerLetter = 2*Math.PI / text.length; this.save(); this.translate(x,y); this.rotate(startRotation); for(var i=0;i<text.length;i++){ this.save(); this.rotate(i*numRadsPerLetter); this.fillText(text[i],0,-radius); this.restore(); } this.restore(); } var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = "bold 30px Serif"; ctx.fillTextCircle("this is a sample of spiraling text. you can see more examples as we go on",150,150,75,Math.PI / 2); </script> </body> </html>

Answer 1

您只需要增加或減少每個字符的半徑。

this.save();
this.translate(x,y);
this.rotate(startRotation);

for(var i=0;i<text.length;i++){
  // ...
  radius += 0.5;   // here arbitrary
  // ...
}

另外，角度增量必須基於當前的圓周長和字母寬度。 這意味着旋轉必須在繪制字符后發生：

var rot = ctx.measureText(text[i]).width / (Math.PI * radius * 2) * Math.PI*2;

這樣以像素數計算周長。 然后，將當前的char寬度除以其標准化值。 然后將標准化值與基於半徑的完整圓角相乘，以獲得下一個旋轉必須相加才能到達新位置的角度。

如果不執行此步驟，根據半徑的不同，字母可能重疊或間隙過大。

您還可以基於先前計算的增量使用相對旋轉來刪除一對save() / restore() ，因此新函數變為：

CanvasRenderingContext2D.prototype.fillTextCircle = function(text,x,y,radius,startRotation){
   this.save();
   this.translate(x,y);
   this.rotate(startRotation);

   for(var i=0;i<text.length;i++){
     var rot = ctx.measureText(text[i]).width / (Math.PI * radius * 2) * Math.PI*2;
      this.fillText(text[i],0, -radius);
      this.rotate(rot);
     radius += 0.5;
   }
   this.restore();
}

在下面的更新中，我使用任意值來增加半徑。 同樣在這里，您可以通過獲取char的高度，將其除以半徑將其划分為一個完整的圓，然后以此遞增，來更准確地計算它。 為“行”高度添加一個小的增量。

  CanvasRenderingContext2D.prototype.fillTextCircle = function(text,x,y,radius,startRotation){ var numRadsPerLetter = 2*Math.PI / text.length; this.save(); this.translate(x,y); this.rotate(startRotation); for(var i=0;i<text.length;i++){ this.save(); this.rotate(i*numRadsPerLetter); this.fillText(text[i],0,-radius); this.restore(); } this.restore(); } CanvasRenderingContext2D.prototype.fillTextCircle = function(text,x,y,radius,startRotation){ this.save(); this.translate(x,y); this.rotate(startRotation); for(var i=0;i<text.length;i++){ var rot = ctx.measureText(text[i]).width / (Math.PI * radius * 2) * Math.PI*2; this.fillText(text[i],0, -radius); this.rotate(rot); radius += 0.5; } this.restore(); } var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = "bold 30px Serif"; ctx.fillTextCircle("this is a sample of spiraling text. you can see more examples as we go on",150,150,75,Math.PI / 2);

 <canvas id="canvas" width="500" height="500"></canvas>

如何使用canvas和javascript繪制Spraling文本？

問題描述

1 個解決方案

解決方案1
2 已采納

如何使用canvas和javascript繪制Spraling文本？

問題描述

1 個解決方案

解決方案1 2 已采納

解決方案1
2 已采納