1 <!DOCTYPE html>
2 <html lang='zh-cn'>
3 <head>
4 <title>Insert you title</title>
5 <meta name='description' content='this is my page'>
6 <meta name='keywords' content='keyword1,keyword2,keyword3'>
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
8 <link rel='stylesheet' type='text/css' href='./css/index.css' />
9 <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>
10 <style type='text/css'>
11 html,body {
12 margin: 0; padding: 0;
13 }
14
15 html {
16 height: 100%;
17 }
18
19 body {
20 background: #000;
21 }
22
23 #can {
24 display: block; margin: 25px auto;border-radius: 2px;background:#FFF;
25 }
26 </style>
27 <script type='text/javascript'>
28 $( function(){
29 var can = $('#can').get(0);
30 var oCan = can.getContext('2d');
31 var oImg = $('#img').get(0);
32 /*
33 图片预加载的方式:
34 在W3C HTML Image DOM 中当美使用一个<img/>标签时系统自动创建一个new Image()对象,这个对象包含诸多属性和时间其中可以为我们实现图片预加载的属性和事件
35 包括:
36 属性 :
37 complete
38 readyState : complete loading
39 onerror:
40 onload
41 */
42 if(oImg.complete == 'true' || oImg.readyState == 'complete' || oImg.readyState == 'loading'){
43 drawImage();
44 }else{
45 oImg.onload = drawImage ;
46 }
47 function drawImage(){
48 /*
49 javascript demo code ...
50 */
51 }
52 } );
53 </script>
54 </head>
55 <body>
56 <canvas id='can' width='500' height='450'>检测到您的浏览器版本过低,请升级您的浏览器版本以获取更好的用户体验...</canvas>
57 <img src = './images/demo.jpg'/>
58 </body>
59 </html>