JAVASCRIPT DOM编程艺术读书笔记

第十一章 HTML5

创建灰度图片，但是在IE中可以执行，在Chome中却不行，getImageData报错

                     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       
               function convertToGS(img) {        
             //Modernizr是一个Javascript库，检测浏览器是否支持canvas        
             if(!Modernizr.canvas) return;        
                  
             //保存原始的彩色版        
             img.color = img.src;        
                  
             //创建灰度版        
             img.grayscale = createGSCanvas(img);        
                  
             img.onmouseover = function () {        
                 this.src = this.color;        
             }        
                  
             img.onmouseout = function () {        
                 this.src = this.grayscale;        
             }        
                  
             img.onmouseout();        
         }        
                  
         function createGSCanvas(img) {        
                  
             var canvas = document.createElement("canvas");        
             canvas.width = img.width;        
             canvas.height = img.height;        
                  
             var ctx = canvas.getContext("2d");        
                  
             ctx.drawImage(img,0,0);        
                  
             //获取图片区域的数据,data属性返回一个对象，包含了image对象的图片数据 即r  g  b A(alpha通道)        
             var img_data = ctx.getImageData(0,0,img.width,img.height);        
                  
             for(var i =0; i < img_data.data.length; i += 4)        
             {        
                 var r = img_data.data[i];        
                 var g = img_data.data[i + 1];        
                 var b = img_data.data[i + 2];        
                  
                 img_data.data[i] = img_data.data[i + 1] = img_data.data[i + 2] = (r + g +b)/3;        
             }        
                  
             ctx.putImageData(img_data,0,0);<br>//返回图片内容作为新的灰度图片的源        
             return canvas.toDataURL();        
         }        
     
     

HTML5 video 自定义控件部分js代码

function addControls(vid) {

    vid.removeAttribute("controls");　　//移除浏览器默认的控件 var controls = document.createElement("div");
    controls.setAttribute("class","controls"); var play = document.createElement("button");
    play.setAttribute("title","play"); // play.innerHTML = '&#25BA;'; play.innerHTML = '&#x25BA;';　　//note!!!

    controls.appendChild(play);

    vid.parentNode.insertBefore(controls,vid);
    
    play.onclick = function () {if(vid.ended)
            vid.currentTime = 0; if(vid.paused)
        {
            vid.play();
        } else {
            vid.pause();
        }
    } //利用play pasue ended事件来监控 vid.addEventListener("play",function () {　　//当视频正在播放时 会触发play事件 跑这个函数
        play.innerHTML = '&#x2590;&#x2590;';
        play.setAttribute('paused', true);

    },false);　　　　　　//第三个参数为false 说明由外往里获取  true的话说明是由里王外获取

    vid.addEventListener("pause",function () {　　//当视频暂停时 会触发pause事件 跑这个函数
        play.removeAttribute('paused');
        play.innerHTML = '&#x25BA;';

    },false);

    vid.addEventListener("ended",function () {
        vid.pause();
    },false);

}

HTML5 表单

为了应对不兼容浏览器，可以进行兼容性检查可以使用inputtypes.type属性比如 if(！Modernizr.inputtypes.date) --检查生成日期的脚本 if(！Modernizr.inputtypes.placeholder) --检查生成占位符的脚本

JAVASCRIPT DOM编程艺术读书笔记

全站热榜