[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);
    }
}