[英]Creating browser game with ASP.NET and HTML5 Canvas
我打算編寫一個基於ASP.NET / C#的瀏覽器游戲,它在ASP.NET服務器上運行,並使用HTML 5 Canvas進行圖形處理(2D位圖,沒有3D圖形)。
是否可以將Bitmaps(png / gif)和其他數據(和2D Array [int,string]的字典)發送到HTML 5 Canvas,並將MouseClick坐標發送回ASP.NET服務器?
你有這個畫布
<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);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.