Question

我有一个画布，使用宽度和高度测量来动态绘制房屋或类似结构的前视图。使用我使用的公式我可以得到前视图绘制但无法到fillStyle或fill（）工作。一旦我弄清楚为什么它没有添加填充颜色，颜色将是动态的下拉。

http://jsfiddle.net/steven27030/0syb9LLh/

HTML

    <canvas id="myCanvas" width="400" height="300" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas>
<br>
<br>
<hr>
<button id="btn" class="btn btn-primary">Hit Me</button>
<button id="colorbtn" class="btn btn-primary">Color Me</button>
<button id="sizebtn" class="btn btn-primary">Try it</button>
<br>
<br>
<p>
    <select id="width" class="width" name="width"></select>
</p>
<p>
    <select id="height" class="height" name="height"></select>
</p>
<div id="here"></div>

CSS

    canvas {
    margin: 25px;
}
button {
    margin-left: 25px;
}
select {
    margin-left: 25px;
}

脚本

$(document).ready(function () {
    $("#sizebtn").click(function () {
        var result;
        var i;
        var j;
        var feet = 30;
        var inches = 12;
        for (i = 0; i < feet; i++) {
            for (j = 0; j < inches; j++) {
                if (j < 10) {
                    result += '<option value="' + i + '.0' + j + '">' + i + '.0' + j + '</option>';
                } else {
                    result += '<option value="' + i + '.' + j + '">' + i + '.' + j + '</option>';
                }
            }
        }
        result += '<option value="30.00">30.00</option>';
        $('select.width').html(result);
        $("select.width").val("12.00");
    });

    $("#sizebtn").click(function () {
        var result;
        var i;
        var j;
        var feet = 500;
        var inches = 12;
        for (i = 0; i < feet; i++) {
            for (j = 0; j < inches; j++) {
                if (j < 10) {
                    result += '<option value="' + i + '.0' + j + '">' + i + '.0' + j + '</option>';
                } else {
                    result += '<option value="' + i + '.' + j + '">' + i + '.' + j + '</option>';
                }
            }
        }
        result += '<option value="500.00">500.00</option>';
        $('select.length').html(result);
        $("select.length").val("21.00");
    });

    $("#sizebtn").click(function () {
        var result;
        var i;
        var j;
        var feet = 12;
        var inches = 12;
        for (i = 0; i < feet; i++) {
            for (j = 0; j < inches; j++) {
                if (j < 10) {
                    result += '<option value="' + i + '.0' + j + '">' + i + '.0' + j + '</option>';
                } else {
                    result += '<option value="' + i + '.' + j + '">' + i + '.' + j + '</option>';
                }
            }
        }
        result += '<option value="12.00">12.00</option>';
        $('select.height').html(result);
        $("select.height").val("5.00");
    });

});


$(document).ready(function () {
    $("#btn").click(function () {
        var canvasWidth = $("#myCanvas").width();
        var canvasHeight = $("#myCanvas").height();
        var selwidth = $('#width').val();
        var selheight = $('#height').val();
        var middle = canvasWidth / 2;
        var percentage = 90 / 100;
        var max_size = canvasWidth * percentage;
        var ftWidth = parseInt(max_size, 10) / 30;
        var InWidth = parseInt(ftWidth, 10) / 12;
        var halfFoot = 6 * InWidth;
        var frameWidth = selwidth * ftWidth;
        var frameFromTop = selheight * ftWidth;
        var frameHeight = canvasHeight - frameFromTop;
        var base = (canvasWidth - frameWidth) / 2;
        var baseSixInche = base - (InWidth * 6);
        var leftoverhangHeight = (frameHeight + .125);
        //var peakHeight = ();
        var rightoverhang = base + frameWidth + (InWidth * 6);
        var rightLeg = frameWidth + base;
        var rise = 3 * InWidth;
        var riserun = (frameWidth / 2) / 12;
        var peak = frameHeight - (rise * riserun);
        var tubeSize = 2.5 * InWidth;
        var roofTrim = 3 * InWidth;
        var sideTrim = 2.5 * InWidth;
        //var peak = (.5 * middle + canvasHeight - frameHeight);
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // Stroked triangle
        ctx.beginPath();
        ctx.moveTo(base, canvasHeight); // Start Point
        ctx.lineTo(base, frameHeight); // Left Leg
        ctx.moveTo(baseSixInche, leftoverhangHeight); // left overhang
        ctx.lineTo(middle, peak); // Peak
        ctx.moveTo(middle, peak); // Peak
        ctx.lineTo(rightoverhang, leftoverhangHeight); // Right overhang
        ctx.moveTo(rightLeg, canvasHeight); // Start Right Leg
        ctx.lineTo(rightLeg, frameHeight); // Right Leg
        ctx.moveTo(rightLeg, canvasHeight); //base
        ctx.lineTo(base, canvasHeight); // End Point

        ctx.closePath();
        ctx.lineWidth = tubeSize;
        ctx.fillStyle = 'blue';
        ctx.fill();
        ctx.strokeStyle = 'silver';
        ctx.stroke();
        //alert(ctx.fill);
    });
});

这是我的代码的小提琴。只需按下“尝试我”按钮即可动态填充宽度和高度下降。选择你想要的尺寸，然后点击Hit Me。很抱歉奇怪的按钮名称，但我只是试验，所以我没有考虑任何想法，直到我在我的项目中使用此代码。

Answer 1

您需要删除对moveLine的调用，并将您的形状绘制为连续多边形以便填充。试试这个：

ctx.beginPath();
ctx.moveTo(base, canvasHeight);
ctx.lineTo(base, frameHeight);
ctx.lineTo(middle, peak);
ctx.lineTo(rightLeg, leftoverhangHeight);
ctx.lineTo(rightLeg, canvasHeight);
ctx.lineTo(base, canvasHeight);
ctx.closePath();

填充完成后，您可以单独绘制遮阳篷。

Answer 2

您还没有为Color Me按钮设置事件处理程序，因此在按下时不会采取任何操作。

关于您的填充没有显示：

您正在使用一系列线段而不是路径创建建筑物。由于无法填充线段，因此忽略ctx.fill（）。

如果您想要创建并填充建筑物，请执行一个moveTo启动，然后使用lineTo来绘制单个路径。

这样做的一种方法是

画出＆＃34;五角大楼＆＃34;建筑本身的形状（没有悬垂）
中风并填充五角大楼
画出悬垂作为笔画

动态画布形状不填充颜色

2 个答案: