Canvas展示型页面

   <script>
            function hasClass(node,oclass){
              var oname=node.className.split(/\s+/);
              for (var i = 0; i < oname.length; i++) {
                  if(oname[i]==oclass){
                     return true;
                  }
              };
                 return false;
             }
             function addClass(node,oclass){
                if(hasClass(node,oclass)){
                    return false;
                }else{
                   node.className+=" "+oclass;
                }
             }
             function removeClass(node,oclass){
                var oname= new RegExp('(\\s|^)'+oclass+'(\\s|$)');
                if(hasClass(node,oclass)){
                   var aclass=node.className;
                   node.className=aclass.replace(oname,"");  
                }else{
                    return false;
                }
             }
            // var //opan=document.querySelector(".panel_parent"),
               function addEvent(obj,even,fn){
                 return obj.addEventListener?obj.addEventListener(even,fn,false):obj.attachEvent("on"+even,fn);
                }
                function unaddEvent(obj,even,fn){
                 return obj.removeEventListener?obj.removeEventListener(even,fn,false):obj.detachEvent("on"+even,fn);
                }
                (function(){
                var Mycanvas=document.getElementById("ocanvas"),
                     _context=Mycanvas.getContext('2d'),
                     opanel=document.querySelector(".panel_parent"),
                     opic=document.querySelectorAll(".pic"),
                     owidht=window.innerWidth,
                     oheight=window.innerHeight;
                     for (var i = 0; i < opic.length; i++) {
                        addEvent(opic[i],"click",function(e){
                        var img=this.children[0],
                            ck=new Image();
                            src=img.getAttribute("data-src");
                            ck.src=src;
                            ck.οnlοad=function(){
                                var _width=this.width>owidht?owidht:this.width,
                                    _height=this.height>oheight?oheight:this.height;
                                    Mycanvas.width=_width;
                                    Mycanvas.height=_height;
                                    _context.drawImage(this,0,0,_width,_height);
                           }
                            removeClass(opanel,"pon");
                            e.stopPropagation();   
                        })
                     };
              
              if(opanel){
                    addEvent(opanel,"click",function(e){
                          addClass(this,"pon");
                         _context.clearRect(0,0,owidht,oheight);
                          e.stopPropagation(); 
                    }) 
               }
              })()

    </script>

演示地址:http://runjs.cn/detail/xe32t5cu