HTML5 Canvas与localStorage简单应用
2011-12-06 12:59 LoujaDy 阅读(593) 评论(0) 编辑 收藏 举报
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();
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
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此声明,且在文章页面给出原文连接,否则保留追究法律责任的权利。