gpt4 book ai didi

html - Canvas 中文字轮廓的刺

转载 作者:搜寻专家 更新时间:2023-10-31 23:05:05 25 4
gpt4 key购买 nike

我正在使用 html5 canvas 绘制一些文本,但我得到了一些丑陋的结果,这是我绘制文本的示例代码:

  var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 80;
var y = 110;

context.fillStyle = "white"
context.font = '13px Arial';
context.lineWidth = 3;
// stroke color
context.strokeStyle = 'black';
context.strokeText('ABCDEFGHIJKLMNOPQRSTUVWXYZ!', x, y);
context.fillText('ABCDEFGHIJKLMNOPQRSTUVWXYZ!', x, y);

我得到了这个结果

enter image description here

然后我将文本更改为“abs”并得到了这个

enter image description here

你可以看到“M”和“s”看起来很难看,有没有人知道如何解决这个问题?

最佳答案

这不是因为字体和大小,而是因为笔画路径中的线条是如何连接的。

通过改变 line-join 方法,尖峰将消失:

context.lineJoin = 'round';

关于html - Canvas 中文字轮廓的刺,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20236304/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com