使用画布在矩形内绘制矩形？答案

【问题标题】：using canvas to draw rectangle within rectangle?使用画布在矩形内绘制矩形？
【发布时间】：2014-11-17 02:37:08
【问题描述】：

我必须在矩形内使用画布和输出矩形（矩形的数量取决于我在代码中放入的数量），并且矩形应该很好地适合前一个矩形。我真的不知道如何使矩形居中并使它们适合前一个矩形。我知道为什么我的输出是这样的，但我不确定从这里去哪里。这就是我所拥有的，任何帮助将不胜感激！

<!DOCTYPE HTML>
<html>
    <head>
        <script>
            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
            	var c = canvas.getContext("2d");  //create HTML5 context object to enable draw methods
				drawNestedRectangles(c, 200, 100, 6, 500, 400, "red");
			
            };		
			
				

				
function drawNestedRectangles(context, whereX, whereY, howMany, width, height, color){	
			
		context.beginPath();
		context.rect(whereX, whereY, width, height);
		context.fillStyle = "white";
		context.fill();
		
		context.lineWidth = 4;
		context.strokeStyle = color; 
		context.stroke();
		for(var i=0; i<howMany - 1; i++) {
			whereX = whereX - 5;
			whereY = whereY - 5;
			width = width - 5;
			height = height - 5;
			context.beginPath();
			context.rect(whereX, whereY, width, height);
			context.fill();
			context.lineWidth = 4;
			context.strokeStyle = color;
			context.stroke();
		}
								
			
			
}
</script>
    </head>
    <body>
        <canvas id="myCanvas" width="800" height="600">
        Your browser doesn't support the HTML5 canvas tag 
        	
        </canvas>
    </body>
</html>

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

您只需将矩形移入（添加 x 和 y 值）并相应地更改宽度和高度（基本上再减去 5 以使其适合最后一个）：

whereX = whereX + 5; 
whereY = whereY + 5;
width = width - 10; 
height = height - 10;

<!DOCTYPE HTML>
<html>
    <head>
        <script>
            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
            	var c = canvas.getContext("2d");  //create HTML5 context object to enable draw methods
				drawNestedRectangles(c, 200, 100, 6, 500, 400, "red");
			
            };		
			
				

				
function drawNestedRectangles(context, whereX, whereY, howMany, width, height, color){	
			

		context.beginPath();
		context.rect(whereX, whereY, width, height);
		context.fillStyle = "white";
		context.fill();
		
		context.lineWidth = 4;
		context.strokeStyle = color; 
		context.stroke();
		for(var i=0; i<howMany - 1; i++) {
			whereX = whereX + 5;
			whereY = whereY + 5;
			width = width - 10;
			height = height - 10;
			context.beginPath();
			context.rect(whereX, whereY, width, height);
			context.fill();
			context.lineWidth = 4;
			context.strokeStyle = color;
			context.stroke();
		}
        context.fillStyle = color;
        context.fillText("Hello", whereX + (width/2) , 
whereY + (height/2));
								
			
			
}
</script>
    </head>
    <body>
        <canvas id="myCanvas" width="800" height="600">
        Your browser doesn't support the HTML5 canvas tag 
        	
        </canvas>
    </body>
</html>

【讨论】：

@JamesC。是的，我们只需要：context.fillText("Hello", whereX + (width/2) , whereY + (height/2))。基本上将文本放置在主三角形的中心与将其放置在最后一个相同。我已经更新了我的问题以在中间添加文本。

【解决方案2】：

我会替换这部分代码

for(var i=0; i<howMany - 1; i++) {
    whereX = whereX - 5;
    whereY = whereY - 5;
    width = width - 5;
    height = height - 5;

与：

for (var i = 0; i < howMany - 1; i++) {
    whereX = whereX + context.lineWidth*2;
    whereY = whereY + context.lineWidth*2;
    width = width - context.lineWidth*4;
    height = height - context.lineWidth*4;

现在每个正方形在前一个正方形之后开始 2 个边框宽度，并在之前结束 2 个边框宽度；垂直和水平。

【讨论】：