代码之家 › 专栏 › 技术社区 › cdarwin

如何在内部绘制空文本

html5-canvas canvas javascript

1

cdarwin · 技术社区 · 7 年前

我试图用“阴影”绘制一些文本(在画布元素上),即文本内部为空,周围为黑色。我希望这个黑色相当“重”,所以我使用了线条宽度,但我得到了一个奇怪的效果,正如你在图像中看到的(尤其是在M上)。

我该怎么办?

<我的代码:

var text=“this is the canvas m”;
var canvas=document.getElementByID('c');
var ctx=canvas.getContext(“2d”);
ctx.font=“24px Arial”;
ctx.linewidth=4;
ctx.strokestyle=“黑色”;
stroketext(文本,5,30);
ctx.fillstyle=“白色”;
ctx.filltext(文本,5,30);>pre>


   
    
     
      
      .
     
     
      
      
     
    
    
     
      我该怎么办?
     
    
    
     
      我的代码:
     
     
     
     
      
        var text = "This is the canvas M";
 var canvas = document.getElementById('c');
 var ctx = canvas.getContext('2d');
 ctx.font = "24px Arial";
 ctx.lineWidth = 4;
 ctx.strokeStyle = "black";
 ctx.strokeText(text, 5, 30);
 ctx.fillStyle = "white";
 ctx.fillText(text, 5, 30);
        <canvas id="c"></div>

1 回复 | 直到 7 年前

1

2

oetoni 7 年前

这只是个问题 Arial 字体;尝试 Calibri 问题就不复存在了!

我只换了一行 ctx.font = "24px Arial"; 进入之内 ctx.font = "24px Calibri";

测试它 here .

更新 (也可修复):

这也将解决Arial的问题:

 var text = "This is the canvas M";
 var canvas = document.getElementById('c');
 var ctx = canvas.getContext('2d');
 ctx.font = "24px Arial";
 ctx.lineJoin = 'round';     //ADD THIS LINE
 ctx.miterLimit = 2;         //& THIS LINE
 ctx.lineWidth = 4;
 ctx.strokeStyle = "black";
 ctx.strokeText(text, 5, 30);
 ctx.fillStyle = "white";
 ctx.fillText(text, 5, 30);