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
  // ...
}

此外，角度delta必须基于当前圆周长和字母宽度。这意味着必须在绘制char后进行旋转：

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();
}

在下面的更新中，我使用任意值来增加半径。此外，您可以通过获取焦点的高度来更准确地计算它，将其基于半径划分为整圆，然后使用此增量。为＆＃34; line＆＃34; -height。

添加一个小的delta

＆＃13;

  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);

＆＃13;

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

＆＃13;

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

1 个答案: