使用ASP.NET和HTML5 Canvas创建浏览器游戏

Question

我打算编写一个基于ASP.NET / C＃的浏览器游戏，该游戏在ASP.NET服务器上运行，并使用HTML 5 Canvas进行图形处理（2D位图，无3D图形）。

是否可以将Bitmaps（png / gif）和其他数据（和2D Array [int，string]的字典）发送到HTML 5 Canvas，并将MouseClick坐标发送回ASP.NET服务器？

Answer 1

将单个图像加载到画布

你有这个画布

<canvas id="myCanvas"></canvas>

通过创建新的Image对象加载图像，并在图像加载后将图像添加到画布上。 drawImage（）方法将图像对象渲染到画布上。

<script type="text/javascript">
    var context = $("#myCanvas")[0].getContext("2d");
    var img = new Image();
    img.src = "some-image.jpg";
    img.onload = function() {
        context.drawImage(img, 100, 100);
    }
</script>

获取鼠标在窗口中的位置，并通过AJAX将坐标发送到处理页面：

<script type="text/javascript">
    $(document).bind("click", function () {
        // Add a click-handler to the image.
        $("#myCanvas").bind("click", function (e) {
            var $canvas = $(e.target);
            var offset = $canvas.offset();
            var xpos = e.clientX - offset.left;
            var ypos = e.clientY - offset.top;

            $.post("Process.aspx", { x: xpos, y: ypos } );
        });
    });
</script>

将一组图像加载到画布

加载图像数组，然后在每个图像加载时调用一个函数。

图像将以网格显示。

// array of images
var imgArray = [
    "image01.jpg", "image02.jpg", "image03.jpg",
    "image04.jpg", "image05.jpg", "image06.jpg",
    "image07.jpg", "image08.jpg", "image09.jpg"
];

var preArray = [];    // array of preload images
var count = 0;    // count of loaded images

for (var i in imgArray) {
    preArray[i] = new Image();
    preArray[i].src = imgArray[i];
    preArray[i].onload = function() {
        count++;
        // when the last image was loaded
        if (count == imgArray.length) {
            // draw preload array to the grid
            imageLoaded(preArray);
        }
    }
}

function imageLoaded(img) {
    // grid for canvas
    var xpos = 100;    // margin-left
    var ypos = 100;    // margin-top
    var offset = 70;    // offset for images
    var cols = 3;    // number of columns in a grid

    //creates a grid
    for(var i in img) {
        var xoffset = xpos +  offset * (i % cols);
        var yoffset = ypos +  offset * Math.floor(i / cols);
        context.drawImage(img[i], xoffset, yoffset);
    }
}