1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="gb2312">
5 <title>HTML5</title>
6 <style type="text/css">
7 body{background:#CCC;}
8 </style>
9 </head>
10 <body>
11
12 <canvas id="draw-in-me">你的浏览器不支持canvas!</canvas>
13 <audio scr="music.MP4">
14 <a href="music.MP4">DownLoad music.MP4</a>
15 </audio>
16 <video src="music.MP4" preload controls>
17 <a href="music.MP4">DownLoad music.MP4</a>
18 </video>
19
20 <form method=post action="">
21 <label>text：<input id="first-name" type="text" placeholder="You First Name" /></label> <br />
22 <label>email：<input type="email" /></label> <br />
23 <label>url：<input type="url" /></label> <br />
24 <label>date：<input type="date" /></label> <br />
25 <label>number：<input type="number" /></label> <br />
26 <label>range：<input type="range" /></label> <br />
27 <label>search：<input type="search" /></label> <br />
28 <label>tel：<input type="tel" /></label> <br />
29 <label>color：<input type="color" /></label> <br />
30
31 </form>
32
33 <br />
34 <img class="img" src="canvas.jpg" alt="" />
35 <img id="img" class="img" src="canvas.jpg" alt="" />
36
37
38 <script type="text/javascript" src="modernizr.js"></script>
39 <script type="text/javascript">
40
41 function draw() {
42 var canvas = document.getElementById("draw-in-me");
43 if (canvas.getContext) {
44 var ctx = canvas.getContext("2d");
45 ctx.beginPath();
46 ctx.moveTo(120.0, 32.0);
47 ctx.bezierCurveTo(120.0, 36.4, 116.4, 40.0, 112.0, 40.0);
48 ctx.lineTo(8.0, 40.0);
49 ctx.bezierCurveTo(3.6, 40.0, 0.0, 36.0, 0.0, 32.0);
50 ctx.lineTo(0.0, 8.0);
51 ctx.bezierCurveTo(0.0, 3.6, 3.6, 0.0, 8.0, 0.0);
52 ctx.lineTo(112.0, 0.0);
53 ctx.bezierCurveTo(116.4, 0.0, 120.0, 3.6, 120.0, 8.0);
54 ctx.lineTo(120.0, 32.0);
55 ctx.closePath();
56 ctx.fill();
57 ctx.lineWidth = 2.0;
58 ctx.strokeStyle = "rgb(255, 255, 255)";
59 ctx.stroke();
60 }
61 }
62
63
64 function convertToGS(img) {
65 if (!Modernizr.canvas) return;
66 // 存储原始的彩色版
67 img.color = img.src;
68
69 // 创建灰度版
70 img.grayscale = createGSCanvas(img);
71
72 // 在mouseover/out事件发生时切换图片
73 img.onmouseover = function(){
74 this.src = this.color;
75 }
76 img.onmouseout = function(){
77 this.src = this.grayscale;
78 }
79 img.onmouseout();
80 }
81
82 function createGSCanvas(img) {
83 var canvas = document.createElement("canvas");
84 canvas.width = img.width;
85 canvas.height = img.height;
86
87 var ctx = canvas.getContext("2d");
88 ctx.drawImage(img, 0, 0);
89
90 var c = ctx.getImageData(0,0,img.width,img.height);
91 for (var i = 0; i < c.height; i++) {
92 for (var j = 0; j < c.width; j++) {
93 var x = (i*4) * c.width + (j*4);
94 var r = c.data[x];
95 var g = c.data[x+1];
96 var b = c.data[x+2];
97 c.data[x] = c.data[x+1] = c.data[x+2] = (r+g+b)/3;
98 }
99 }
100 ctx.putImageData(c,0,0,0,0,c.width,c.height);
101 return canvas.toDataURL();
102 }
103
104
105 // video
106 function createVideoControls() {
107 var video = document.getElementsByTagName("video");
108 for (var i = 0; i < video.length; i++) {
109 addControls( video[i] );
110 }
111 }
112
113 function addControls( vid ) {
114 vid.removeAttribute("controls");
115
116 vid.height = vid.videoHeight;
117 vid.width = vid.videoWidth;
118 vid.parentNode.style.height = vid.videoHeight + "px";
119 vid.parentNode.style.width = vid.videoWidth + "px";
120
121 var controls = document.createElement("div");
122 controls.setAttribute("class", "controls");
123
124 var play = document.createElement("button");
125 play.setAttribute("title", "Play");
126 play.innerHTML = "►"; // 播放按钮 箭头符
127
128 controls.appendChild(play);
129
130 vid.parentNode.insertBefore(controls, vid);
131
132 play.onclick = function(){
133 if (vid.ended) {
134 vid.currentTime = 0;
135 }
136 if (vid.paused) {
137 vid.play();
138 }else {
139 vid.pause();
140 }
141 }
142
143 vid.addEventListener("play", function(){
144 play.innerHTML = "▐▐"; // 暂停按钮 暂停符
145 play.setAttribute("paused", true);
146 },false);
147 vid.addEventListener("pause", function(){
148 play.removeAttribute("paused");
149 play.innerHTML = "►"; // 播放按钮 箭头符
150 },false);
151 vid.addEventListener("ended", function(){
152 vid.pause();
153 },false);
154
155 }
156
157 // 判断浏览器支持不支持 placeholder 属性
158 if (!Modernizr.input.placeholder) {
159 var input = document.getElementById("first-name");
160 input.onfocus = function(){
161 var text = this.placeholder || this.getAttribute("placeholder");
162 if ( this.value == text ) {
163 this.value = "";
164 }
165 }
166 input.onblur = function(){
167 if (this.value == "") {
168 this.value = this.placholder || this.getAttribute("placeholder");
169 }
170 }
171 }
172
173 window.onload = function(){
174 draw();
175
176 var obj = document.getElementById("img");
177 convertToGS(obj);
178
179 createVideoControls();
180 }
181 </script>
182
183 </body>
184 </html>
