Html5 canvas draws a maze map and html5canvas
The canvas tag has always been a highlight of html5 and can be used to implement many things. I want to use it to draw a map like a maze. A tile map editor tiled (click to jump to the download link) is available ).
If you want to create a labyrinth map like this, you can splice a div using dom without canvas to achieve this effect. Is that unreasonable? First, there will be a large number of divs on the page, and it will consume a lot of performance through dom operations. If the map is large, it will be very smooth and very slow. If you use canvas, the performance will be greatly improved. The method is also very simple, and the amount of code is very small.
After a brief introduction, you can start to get started. After the software mentioned above is installed, open it for plotting. Note: This is just a drawing software. After drawing, data is generated (retained in js or json format), the data is obtained, and then painted through canvas. Perform the following operations.
①: After opening the page:
②: Create a file
The width and height of each block are 40px, and the total width and height are 480px * 240px. You can set it by yourself.
③: Create a New Graph block. It is to draw a picture through a graph block. Click Browse to take an image.
④: You can draw a picture in the gray area on the left by taking a picture block on the right. I drew a picture like this.
⑤: Save the js file ---- save the file. This is the js file I got.
(function(name,data){ if(typeof onTileMapLoaded === 'undefined') { if(typeof TileMaps === 'undefined') TileMaps = {}; TileMaps[name] = data; } else { onTileMapLoaded(name,data); }})("map1",{ "height":6, "layers":[ { "data":[0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 1, 0, 1, 1, 0, 0, 1, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0,0, 1, 1, 1, 1, 1, 1, 0], "height":6, "name":"\u5757\u5c42 1", "opacity":1, "type":"tilelayer", "visible":true, "width":12, "x":0, "y":0 }], "nextobjectid":1, "orientation":"orthogonal", "properties": { }, "renderorder":"right-down", "tileheight":40, "tilesets":[ { "firstgid":1, "image":"..\/..\/..\/Public\/Pictures\/Sample Pictures\/Penguins.jpg", "imageheight":768, "imagewidth":1024, "margin":0, "name":"Penguins", "properties": { }, "spacing":0, "tilecount":475, "tileheight":40, "tilewidth":40 }], "tilewidth":40, "version":1, "width":12});
For the above Code, only the red text code can help us with this drawing. The data in the data, 0 indicates that there is no map block, and not 0 indicates the map block. You can draw a non-zero image through traversal to obtain the width and height as long as it is used for line breaks and so on. This is the role of the tile map editor.
The following code is started. The code is easy to understand and can be directly pasted:
<! Doctype html> </Head> <body> <canvas id = "canvas1" width = "480" height = "240"> </canvas> <! -- Pay attention to the size of the canvas. Contact the map size settings --> <script>
// Var map = {"data": [0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 1, 0, 1, 1, 0, 0, 1, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0], "height": 6, "width": 12} var canvas = document. getElementById ("canvas1"); var ctx = canvas. getContext ("2d"); var W = 40; // var H = 40 for each map block; // High var l = 0; var t = 0; for (var I = 0; I <map. data. length; I ++) {l = I % map. width * W; // draw the X coordinate of each map block if (I % map. width = 0 & I! = 0) {// when a line is reached, note that the first line is 0% 0 = 0; so t + = H should be removed; // draw the Y coordinate of the map block} if (map. data [I]> 0) {// when the data in the map block is not 0, draw the map block ctx. fillRect (l, t, W, H) ;}</script> </body>
The effect is as follows:
This is exactly the same as above. Simply a dozen lines of JS code can be implemented. Even if the map is larger, there is only a large amount of data, which does not have high performance requirements.
In addition, if you want to paste the original image, it is also very simple, but involves location calculation.
Canvas can be used to cut images: ctx. drawImage (this, imgL, imgT, W, H, this. l, this. t, W, H). You can use this code.
One of your own exercises.
<!doctype html>
Effect:
The idea is like this, so I will not talk about it again. Originality is not easy. If you need to reprint it, please state the source. Thank you.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
