javascript - 尝试制作一排随机宽度与 Canvas 宽度成比例的砖 block

Question

我正在尝试画一排砖 block

• 砖 block 的长度应是随机的
• 砖 block 不应伸出 Canvas 。
• Canvas 长度为 400，我希望行和 Canvas 之间每边各有 10 px 的填充
• 每个砖 block 之间应该有 10 像素的填充(或者更好，因为用户可以输入较大的数字，例如 35，您可以使填充更小，例如 2 像素 [可选])

在这段糟糕的代码中，您可以看到我尝试创建 7 个砖 block drawRow(7)。它们具有随机大小，但与 Canvas 宽度减去 Canvas 填充不成比例。并且它们的砖 block 之间没有 10 像素的填充。这是一道数学题，我可能无法算出比例。任何帮助将不胜感激。

$(function(){
	var canvas = $("canvas")[0],
		context = canvas.getContext("2d"),
		cWidth = canvas.width,
		brickHeight = 20,
		canvasPadding = 10,
		lengthOfRow = cWidth - 20 *2,
		width = 0,
		x = canvasPadding,
		brickPadding = 10;

	function drawBrick(x,y,w,h){
		context.beginPath();
		context.rect(x,y, w, h)
		context.fillStyle = "red";
		context.fill()
		context.strokeStyle = "black"
		context.stroke()
		context.closePath()
	}

	function drawRow(num){
		
			
			// width = 50;
			for(var i = 0; i < num; i ++){
				if(x + width < lengthOfRow + width){
					// x= x + width + brickPadding;
					var numOfBlocks = lengthOfRow / num;
					width = Math.floor(Math.random() * ((numOfBlocks + 10 - (numOfBlocks)  + 1) +  (numOfBlocks -10) )) 
					x = i * (width  + width /brickPadding)
					
					drawBrick(x +canvasPadding ,0,width * 2,brickHeight)
					// width += width;
				// x += x
				console.log(x, " ", width, " numblock ", numOfBlocks)
				}

			}
	}

	drawRow(7)

})

background: #ece;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>

Answer 1

您的drawRow()函数使用单个循环来计算随机砖 block 宽度并绘制砖 block 。但是，除非您知道单个砖 block 宽度与所有砖 block 宽度之和的比率，否则无法计算单个砖 block 的宽度。我建议使用两个循环。在第一个循环中，计算每个砖 block 的随机数并对这些随机数求和。您现在可以计算单个砖 block 宽度与砖 block 宽度总和的比率(例如砖 block 的随机数除以随机数总和)。在第二个循环中，计算砖 block 宽度并绘制砖 block 。个体的砖 block 宽度等于所有砖 block 宽度的总和乘以砖 block 与总和的比率。所有砖 block 宽度的总和等于 Canvas 宽度减去 Canvas 填充的总和再减去砖 block 填充的总和。例如，代码可能看起来像......

$(function() {

    var canvas = $("canvas")[0],
        context = canvas.getContext("2d"),
        canvasWidth = canvas.width,
        canvasPadding = 10,
        brickPadding = 10,
        brickY = 0,
        brickHeight = 20;

    function drawBrick(x, y, w, h) {
        context.rect(x, y, w, h)
        context.fillStyle = "red";
        context.fill()
        context.strokeStyle = "black"
        context.stroke()
    }

    function drawRow(num){
        var brickX = canvasPadding;
        var brickRandom = [];
        var sumBrickRandom = 0;
        var sumBrickWidths = canvasWidth - 2 * canvasPadding - (num - 1) * brickPadding;
        for (var i = 0; i < num; i++) {
            var randomNumber = 1 + 3 * Math.random();
            brickRandom[i] = randomNumber;
            sumBrickRandom += randomNumber;
        }
        for(var i = 0; i < num; i++) {
            var brickWidth = sumBrickWidths * brickRandom[i] / sumBrickRandom;
            drawBrick(brickX, brickY, brickWidth, brickHeight);
            brickX += brickWidth + brickPadding;
        }
    }

    drawRow(7);

});

请注意，我生成了 1 到 4 之间的随机数。这可确保最大宽度不超过最小宽度的 4 倍。这可以避免最小宽度接近于零的情况。