将字母随机放置在 canvas 中，距边框偏移 %

Question

我有这个 canvas，我在 canvas 中随机放置了一个字母。

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

结果：

我想进一步改进该功能，以包含距 canvas 边界的百分比偏移量，以限制字母出现的位置。

结果将与此类似。

有什么想法吗？

Answer 1

您需要考虑边界上的 10%。

尝试以下使用此原理的方法...但还要记住 canvas 的坐标是基于左上角的...但是当您使用字体时，它会向上（不是down) 所以你也必须考虑到这一点。

var canvas = document.getElementsByTagName("canvas")[0];
var fontSizePx = 35;

// Get 10% of the width/height
var cw = (canvas.width / 10);
var ch = (canvas.height / 10);

// Get 80% of the width/height but minus the size of the font
var cw80 = (cw * 8) - fontSizePx;
var ch80 = (ch * 8) - fontSizePx;

for(var i = 0; i < 10; i++) {
  // Get random value within center 80%
  var w = (Math.random() * cw80) + cw;
  // Add on the size of the font to move it down
  var h = (Math.random() * ch80) + ch + fontSizePx;
  drawRandomCircle(canvas,w,h);
}

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

canvas {
  border:1px solid black;
}

<canvas></canvas>

将字母随机放置在 canvas 中，距边框偏移 %

Placing a letter randomly in a canvas offset by a % from border

javascript

canvas

html5-canvas