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
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此声明，且在文章页面给出原文连接，否则保留追究法律责任的权利。