1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Canvas</title>
9 <style>
10 canvas {
11 display: block;
12 margin: 0 auto;
13 border: 1px solid #eee;
14 }
15 </style>
16 </head>
17
18 <body>
19 <canvas height="500" width="500" id="canvas"></canvas>
20
21 <script>
22 var canvas = document.querySelector("#canvas");
23 var ctx = canvas.getContext("2d");
24 var w = canvas.width;
25 var h = canvas.height;
26
27 function animation() {
28 var fno = 0;
29 var timer = setInterval(function() {
30 fno++;
31 ctx.clearRect(0, 0, w, h);
32 ctx.fillText(fno, 10, 20);
33 ctx.drawImage(fno % 2 ? imageSorce.boy : imageSorce.pokemon, 100, 100);
34 if (fno == 10) {
35 clearInterval(timer);
36 }
37 }, 500)
38 }
39
40 var imageSorce = {};
41 var imageLoadNum = 0;
42 var xhr = new XMLHttpRequest();
43 xhr.open("get", "../json/loadImage.json", true);
44 xhr.send(null);
45 xhr.onreadystatechange = function() {
46 if (xhr.readyState == 4) {
47 var obj = JSON.parse(xhr.responseText);
48 for (var i = 0; i < obj.images.length; i++) {
49 imageSorce[obj.images[i].name] = new Image();
50 imageSorce[obj.images[i].name].src = obj.images[i].url;
51 imageSorce[obj.images[i].name].onload = function() {
52 imageLoadNum++;
53 ctx.clearRect(0, 0, w, h);
54 ctx.fillText("正在加载第" + imageLoadNum + "/" +
55 obj.images.length + "张图片，请稍后...", 100, 100);
56 if (imageLoadNum == obj.images.length) {
57 animation()
58 }
59 }
60 }
61 }
62 }
63
64 /*
65 loadImage.json:
66 {
67 "images": [{
68 "name": "pokemon",
69 "url": "../static/images/pokemon.png"
70 },
71 {
72 "name": "boy",
73 "url": "../static/images/boy.png"
74 }
75 ]
76 }
77 */
78 </script>
79
80 </body>
81
82 </html>