用画布在矩形内绘制矩形？
[英]using canvas to draw rectangle within rectangle?
问题描述
I have to use canvas and output rectangles within rectangles (number of rectangles depends on how many I have put in the code) and the rectangles should fit nicely inside the previous one. 
我必须在矩形内使用画布和输出矩形（矩形的数量取决于我在代码中放入的数量），并且矩形应该很好地适合上一个矩形。 I'm really lost as to how to center the rectangles and have them fit inside the previous rectangle. 我真的对如何使矩形居中并使它们适合先前的矩形感到迷惑。 I know why my output is the way it is, but I'm not sure where to go from here. 我知道为什么我的输出是这样，但是我不确定从这里开始。 This is what I have, any help will be greatly appreciated! 这就是我所拥有的，任何帮助将不胜感激！
<!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>
2 个解决方案
解决方案1
1 2014-11-17 02:44:05
You need to simply move the rectangle's in (add x and y values) and change the width and height accordingly like so (basically subtract it by 5 more to fit it inside the last one): 您只需要简单地移动矩形的（添加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>
解决方案2
0 2014-11-17 02:47:52
I would replace this part of the code 我将替换这部分代码
for(var i=0; i<howMany - 1; i++) {
whereX = whereX - 5;
whereY = whereY - 5;
width = width - 5;
height = height - 5;
With: 附：
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;
Now each square start 2 border widths after the previous one and ends 2 border widths before; 现在，每个正方形在前一个边界之后开始2个边界宽度，在前一个边界之后结束2个边界宽度； both verticaly and horizontaly. 垂直和水平。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.