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

Question

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

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

Answer 1

将单个图像加载到 Canvas

你有这张 Canvas

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

通过创建新的 Image 对象并在图像加载后将图像添加到 Canvas 上来加载图像。 drawImage() 方法将图像对象渲染到 Canvas 上。

<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>

将图像数组加载到 Canvas

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

图像将显示在网格中。

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