如何在画布空间按比例创建两个或多个矩形？答案

【问题标题】：How Create two or more rectangles in on space of canvas proportionally?如何在画布空间按比例创建两个或多个矩形？
【发布时间】：2014-01-15 15:58:58
【问题描述】：

伙计们！

我有问题。

我想在空间中按比例创建两个或多个矩形。所以，有一个 600x800 像素的画布，我有一个 200x400 像素的矩形，当我单击一个按钮时，我需要在其他的某个空间中创建更多一个矩形。保持，两个矩形均为 100x200 和 100x200。

有人吗？谢谢！

【问题讨论】：

您需要显示尝试。发布您尝试过的代码，如果您遇到障碍，我们将为您提供帮助。你有什么问题？
也许你可以添加一张想要的结果是什么样子的图片
这是屏幕：uploaddeimagens.com.br/images/000/158/026/original/…，当单击“添加”按钮时，生成：uploaddeimagens.com.br/images/000/158/029/original/…，当再次单击“添加”按钮时，生成：uploaddeimagens.com.br/images/000/158/032/original/…..

标签： javascript html canvas draw

【解决方案1】：

你所要做的就是：

保留 Y 坐标变量，
在该 Y 处绘制下一个矩形，
将 Y 增加矩形高度（加上您想要的矩形之间的任何间距）

这是代码和演示：http://jsfiddle.net/m1erickson/czMXH/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var y=10;
    var spacer=8;

    $("#again").click(function(){

        ctx.fillStyle=randomColor();
        ctx.fillRect(10,y,100,66);
        ctx.strokeStyle="black";
        ctx.strokeRect(10,y,100,66);
        y+=66+spacer;

    });

    function randomColor(){ 
        return('#'+Math.floor(Math.random()*16777215).toString(16));
    }


}); // end $(function(){});
</script>

</head>

<body>
    <button id="again">Add</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

【讨论】：

几乎是这样。假设第一个矩形的高度和宽度为 200x400，当我单击“添加”按钮时，占据第一个矩形的空间将被划分为两个矩形，每个矩形为 100x400，依此类推。所以让我们假设我只有 200x400 的空间，我无法克服它。矩形必须按比例适应空间。谢谢！
以下是如何将固定区域细分为越来越多的矩形：jsfiddle.net/m1erickson/C3qnf
完美，没错！但是，您删除并再次创建。如果我用矩形创建一个文本？文字会随着矩形成比例地减少吗？
是的，重绘是重新划分空间的唯一方法。如果您正在绘制文本，则必须在矩形变短时缩放字体大小。
完美！谢谢您的帮助。所以你可以，我会在这里发布代码。谢谢你们！ ;)