ASP.NET 从 MVC 模型数据渲染 HTML5 画布答案

【问题标题】：ASP.NET Render HTML5 Canvas from MVC Model DataASP.NET 从 MVC 模型数据渲染 HTML5 画布
【发布时间】：2019-12-22 08:06:48
【问题描述】：

我正在使用 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.

【问题讨论】：

加上@Html.Raw 上的括号，你又把它变成了一个字符串

标签： javascript asp.net html5-canvas asp.net-core-2.1

【解决方案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);
    }
}

【讨论】：