JS DOM 编程艺术(第2版)读书笔记第11章 HTML5_function converttogs(img){ if(!modernizr.canvas) r-CSDN博客

  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>