使用AJAX响应填充画布以绘制矩形

时间:2014-10-21 12:20:04

标签: jquery html .net ajax canvas

是否有任何方法可以集成AJAX响应以在画布上绘制内容?

var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    context.beginPath();
    context.strokeStyle = 'black';
    context.rect(66, 28, 15, 15);
    context.stroke();
    context.closePath();

在aspx页面上的脚本块中添加时效果很好,并且创建了画布但是我想从数据库生成这些数据并动态创建画布。

到目前为止,我已设法针对点击处理程序创建画布,但不知道如何添加值。

success: function (msg) {
               DialogMessageBox.Close();
               if (msg.Result == "OK") {
                   var data = eval(msg.Message)
                   $("#ticketArea").html("");
                   var el = document.createElement('canvas');
                   el.height = 550
                   el.width = 850
                   el.style = "border:3px solid orange; border-radius:10px;"
                   $("#ticketArea")[0].appendChild(el);
                   var ctx = el.getContext('2d');
                   ctx.beginPath();
                   ctx.strokeStyle = 'black';
                   ctx.scale(1, 1);
             // Insert rest of Msg.Message here????

我可以循环回复吗?它可以是一个简单的字符串,如“ctx.rect(3,15,38,2); ctx.rect(65,9,16,2); ctx.rect(3,9,38,2);?< / p>

我可以从中抽出它吗?或者我应该将它放入JSON对象并循环?

[
{
    "text": "rect(3,15,38,2);"
}
]

 for (var i = 0; i < data.length; i++) {
                       ctx.data[i].text;
                   }

关于将HTML Canvas与AJAX或服务器端调用合并的信息不多。它甚至可能吗?

关于Canvas Charts的帖子很好 - http://www.aspsnippets.com/Articles/Using-HTML5-Canvas-charts-in-ASPNet.aspx但是它专门使用了JS库。

任何帮助都将不胜感激。

0 个答案:

没有答案