Javascript 将字母随机放置在画布中，与边框的偏移量为%

我在画布上随机放置了一封信

var w = Math.random() * canvas.width;
var h = Math.random() * canvas.height;

drawRandomCircle(canvas,w,h);

function drawRandomCircle(canvas,w,h) 
{
    
    var fontSize = '35';            
    var ctx = canvas.getContext("2d");
    
    var color = 'rgba(245, 66, 66,1.0)';
    ctx.fillStyle = color;
    ctx.font = fontSize + 'pt Arial';
    ctx.fillText('O', w, h);
    
} 

结果是：

我想进一步改进函数，在画布边界上添加一个以%为单位的偏移量，以限制字母出现的位置

结果与此类似

---

有什么想法吗？

你需要考虑边界上的10%

尝试以下使用此原则的方法。。。但也要记住画布的坐标是基于左上角的。。。但是当你做字体时，它会上升（而不是下降），所以你也必须考虑到这一点

var canvas=document.getElementsByTagName（“canvas”）[0]；
var fontSizePx=35；
//获得宽度/高度的10%
var cw=（canvas.width/10）；
var ch=（canvas.height/10）；
//获取宽度/高度的80%，但减去字体大小
var cw80=（cw*8）-fontSizePx；
var ch80=（ch*8）-fontSizePx；
对于（变量i=0；i<10；i++）{
//获取中心80%内的随机值
var w=（Math.random（）*cw80）+cw；
//添加字体大小以将其向下移动
var h=（Math.random（）*ch80）+ch+fontSizePx；
画圈（画布，w，h）；
}
函数drawRandomCircle（画布，w，h）{
var ctx=canvas.getContext（“2d”）；
var color='rgba（245,66,66,1.0）'；
ctx.fillStyle=颜色；
ctx.font=fontSizePx.toString（）+'px Arial'；
ctx.填充文本（'O'，w，h）；
}

画布{
边框：1px纯黑；
}

---

计算出画布宽度的80%。。。基于此生成一个随机值。。。然后将画布宽度的10%添加到该值，这还要感谢字体行为的指针。不客气，这不是一门精确的科学，尤其是在处理字体时。你最好还是调查一下使用。祝你其余的项目好运啊，当然，只有当你想要圆的时候。。。我刚刚重读了你的标题/问题，你写了州信。。。所以，忽略这个。arc评论！