HTML5 Canvas与localStorage简单应用

Canvas 是HTML5的一大2d图形处理利器，localStorage是本地存储,它有一个很有意思的API，类似于观察者模型的事件storage事件，一者本地存储发生改变，它会响应注册了storage事件的所有窗口。 这样当我们在其中一个窗口的Canvas中画东西是，其它窗口可以监听并重绘，这就是下面的这个例子。

 

打开两个窗口，然后在其一个窗口画，另一个窗口则可以看到你画的东东 

 

 

 

       
   var canvas = document.getElementById("drawbroad"); 
   
             canvas.addEventListener("mousemove", onMouseMove, 
   false); 
   
             canvas.addEventListener("mousedown", onMouseDown, 
   false); 
   
             canvas.addEventListener("mouseup", onMouseUp, 
   false); 
   
              
   var btnSave=document.getElementById("btnSaveToImage");
   
             btnSave.addEventListener("click",
   function(evt){
   

   //
   alert("d");
   
Canvas2Image.saveAsPNG(canvas); 
   
             },
   false)
   
             
   var info = document.getElementById("pointInfo");
   
             
   var context = canvas.getContext("2d"); 
   
          
   //
   当前坐标信息
   
            
   var linePoint=[];
   
             
   //
   记录鼠标是否按下
   
            
   var isMouseDown=0; 
   
              
   //
   添加
   
             window.addEventListener('storage', 
   function(evt) { 
   
 console.log('The value for ' + evt.key + ' was changed from' + evt.oldValue + ' to ' + evt.newValue);
   

   if(evt.key=="pointInfo")
   
 {
   

   //
   开始画传过来的点信息
   

   var strPointInfo=evt.newValue.split(";");
   
               
   //
   保存上一次状态
   
              context.save();
   
               
   //
   设置线条宽度
   
              context.lineWidth=4;
   
               
   //
   线条颜色
   
              context.strokeStyle="#808080";
   
               
   //
   准备画
   
              context.beginPath(); 
   
               
   //
   异步方式
   
             
   /*
   var drawAsync = eval(Jscex.compile("async", function () {
              for(var i=0;i<strPointInfo.length;i++)
               {
 var tempPoint=strPointInfo[i].split(",");
 if(i==0)
 {
 //将起点移动到些位置
 context.moveTo(tempPoint[0],tempPoint[1]);
 }
 //移到哪画到哪 
 context.lineTo(tempPoint[0],tempPoint[1]); 
 //边画边显示
 context.stroke();
 $await(Jscex.Async.sleep(1));
                   } 
 }));
 drawAsync().start();
   */
   
               
   //
   同步方式
   

   for(
   var i=0;i<strPointInfo.length;i++)
   
               {
   

   var tempPoint=strPointInfo[i].split(",");
   

   if(i==0)
   
 {
   

   //
   将起点移动到些位置
   
context.moveTo(tempPoint[0],tempPoint[1]);
   
 }
   

   else{
   

   //
   移到哪画到哪 
   
context.lineTo(tempPoint[0],tempPoint[1]); 
   

   //
   边画边显示
   
context.stroke();
   
                    } 
   
                   }
   
                    
   //
   context.restore();
   
                   context.closePath();
   
 }
   
              }, 
   false);
   
             
   function onMouseMove(evt) {
   

   if(isMouseDown==1)
   
 {
   

   //
   记录鼠标移动的点
   
linePoint.push({x:evt.layerX,y:evt.layerY});
   

   //
   移到哪画到哪 
   
                   context.lineTo(evt.layerX,evt.layerY); 
   
                    
   //
   边画边显示
   
                   context.stroke();
   
                    
   //
   context.restore();
   
} 
   
              info.innerHTML="X:"+evt.layerX +" Y:"+evt.layerY;
   
             } 
   
             
   function onMouseDown(evt) { 
   
 linePoint=[]; 
   
               
   //
   标记鼠标已经按下
   
              isMouseDown=1;
   
               
   //
   记录鼠标按下的位置
   
              linePoint.push({x:evt.layerX,y:evt.layerY}); 
   
               
   //
   保存上一次状态
   
              context.save();
   
               
   //
   设置线条宽度
   
              context.lineWidth=4;
   
               
   //
   线条颜色
   
              context.strokeStyle="#808080";
   
               
   //
   将起点移动到些位置
   
              context.moveTo(evt.layerX,evt.layerY); 
   
               
   //
   准备画
   
              context.beginPath(); 
   
             } 
   
             
   function onMouseUp(evt) { 
   

   //
   标记鼠标已经弹起
   
               isMouseDown = 0; 
   
                
   //
   记录鼠标最后的位置 
   
               linePoint.push({x:evt.layerX,y:evt.layerY});
   
                
   //
   移到哪画到哪 
   
               context.lineTo(evt.layerX,evt.layerY); 
   
                
   //
   边画边显示
   
               context.stroke(); 
   
                
   //
   context.restore();
   
               
   //
   将本次的坐标信息传到后台
   

   var strPointData=""
   

   for(
   var i=0;i<linePoint.length;i++)
   
 {
   
 strPointData+=linePoint[i].x+","+linePoint[i].y+";";
   
 }
   
 strPointData=strPointData.substring(0,strPointData.length-1)
   
                localStorage.setItem('pointInfo',strPointData);
   
 context.closePath();
  

            }  

作者：Louja
出处：http://loujady.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此声明，且在文章页面给出原文连接，否则保留追究法律责任的权利。