js学习之地图生成
首先，上地圖圖片
接著，js，我們可以把圖片看成一塊塊32*32像素的
var i; var j;window.onload = function () {gamemap(15, 10, 10, "map.jpg"); }var mapimg = new Image(); var map = [[18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 55, 55, 18],[18, 18, 18, 17, 17, 17, 17, 17, 17, 17, 17, 17, 55, 55, 18],[18, 18, 17, 17, 17, 17, 18, 18, 17, 17, 17, 17, 55, 55, 18],[18, 17, 17, 17, 18, 18, 18, 18, 18, 17, 17, 55, 55, 17, 18],[18, 17, 17, 18, 22, 23, 23, 23, 24, 18, 17, 55, 55, 17, 18],[18, 17, 17, 18, 25, 28, 26, 79, 27, 18, 55, 55, 17, 17, 18],[18, 17, 17, 17, 17, 10, 11, 12, 18, 18, 55, 55, 17, 17, 18],[18, 18, 17, 17, 10, 16, 16, 16, 11, 55, 55, 17, 17, 17, 18],[18, 18, 17, 17, 77, 16, 16, 16, 16, 21, 21, 17, 17, 17, 18],[18, 18, 18, 18, 18, 18, 18, 18, 18, 55, 55, 18, 18, 18, 18] ]; //創建構成地圖的二維數組 function gamemap(x, y, num, url) { //長個數，寬個數，一行個數，圖片路徑var canvas = document.getElementById("map");var context = canvas.getContext("2d");mapimg.src = url;mapimg.onload = function () {context.fillRect(0, 0, x * 32, y * 32);//畫一個長480，寬320的矩形 for (i = 0; i < x; i++) {for (j = 0; j < y; j++) {drawTile(i * 32, j * 32, map[j][i], num);}}//循環調用繪制地圖的函數，直到畫完為止 } }function drawTile(x, y, type, num) {var canvas = document.getElementById("map");var context = canvas.getContext("2d");context.drawImage(mapimg, type % num * 32, parseInt(type / num) * 32, 32, 32, x, y, 32, 32); }最后，頁面調用
<!DOCTYPE html> <html> <head><title>地圖生成</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" /><script type="text/javascript" src="map.js"></script> </head> <body><canvas id="map" width="480px" height="320px" style="border: 1px solid gray;"></canvas> </body> </html>效果圖：
轉載于:https://www.cnblogs.com/margin-gu/p/5025675.html
總結
- 上一篇： 半导体FAB里基本的常识简介
- 下一篇： vsftpd.conf 详解与实例配置