Question

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

<!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>

Answer 1

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

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

＆＃13;

<!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>

＆＃13;

Answer 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个边框宽度;垂直和水平。

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

2 个答案: