-
Notifications
You must be signed in to change notification settings - Fork 0
/
10-load-image.html
53 lines (52 loc) · 1.55 KB
/
10-load-image.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Load Image</title>
<!-- <link rel="stylesheet" href="../include/style.css"> -->
</head>
<body>
<header>
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
</header>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
// window.onload = function () {
// var canvas = document.getElementById('canvas'),
// context = canvas.getContext('2d'),
// image = new Image();
//
// image.src = "./assets/picture.jpg";
// image.onload = function() {
// context.drawImage(image, 0, 0);
// };
// };
//yuands修改
window.onload = function () {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// image = new Image();
var arrImage=[];
var arr=["images/3.png","images/1.png","images/2.png"]
for(var i=0;i<arr.length;i++){
arrImage[i]=new Image();
arrImage[i].src=arr[i];
console.log(arr[i])
arrImage[i].onload = function() {
context.drawImage(arrImage[i], 10*i, 10*i);
};
}
// arrImage[0].onload = function() {
// context.drawImage(arrImage[0], 0, 0);
// };
// arrImage[1].onload = function() {
// context.drawImage(arrImage[1], 50, 50);
// };
// image.src = "./assets/picture.jpg";
// image.onload = function() {
// context.drawImage(image, 0, 0);
// };
};
</script>
</body>
</html>