ASP.NET 從 MVC 模型數據渲染 HTML5 畫布

Question

我正在使用 ASP.NET Core 2.0。 如何使用模型中的數據在 HTML5 Canvas 上繪圖？ 我想遍歷模型中的記錄。

public IEnumerable<BodyPain> painRecs;

我在 Razor 視圖中嘗試了以下代碼：

<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    var data = '@Html.Raw(Json.Serialize(Model.painRecs))';
    alert(data);
    //console.log(data);
    for (b = 0; b < data.length; b++) {
        var pr = data[b];
        alert(pr.painType);
        ctx.beginPath();
        ctx.arc(pr.xPos, pr.yPos, 8, 0, 2 * Math.PI);
        ctx.fillStyle = "#DC143C";
        ctx.fill();
    }
</script>

**alert(data);**產生以下輸出：

[{"memberID":9048,"painID":6880,"painScale":1,"painType":4,"xPos":497.333344,"yPos":385.333344}
,{"memberID":9048,"painID":6888,"painScale":1,"painType":4,"xPos":313.333344,"yPos":428.0}]

但是**alert(pr.painType);** causes error UNDEFINED 。

Answer 1

終於用這個語法讓它工作了：

function displayPainRecs() {
    try {
        var x = 0;
        var y = 0;
        var cvs = document.getElementById('myCanvas');
        var ctx = cvs.getContext('2d');
        var data = @Html.Raw(Json.Serialize(Model.painRecs));
        for (i = 0; i < data.length; i++) {
            var pr = data[i];
            x = pr["xPos"].toFixed(0);
            y = pr["yPos"].toFixed(0);
            ctx.beginPath();
            ctx.arc(x, y, 8, 0, 2 * Math.PI);
            ctx.fillStyle = "#DC143C";
            if (pr["painType"] == 1) {
                ctx.fillStyle = "#DC143C";
            }
            else if (pr["painType"] == 2) {
                ctx.fillStyle = "#EA728A";
            }
            ctx.fill();
        }
    }
    catch (err) {
        alert(err);
    }
}