如何使用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 已采纳