HTML5 Canvas白板

看了很多的白板例子，都没有与保存相关的例子，而我的思路是使用数组来记录鼠标绘画时的轨迹坐标，在对数组进行操作，具体怎么把数组中的数据保存到数据库大家各显神通，我就不多说了。现在唯一担心的是这个数组能保存多少数据呢？据我测试当数组在2万个值内还是没什么影响的，之后就不好说····  ·· 先看下面小样，之后在改进吧。

<!DOCTYPE HTML>    
<html>   
<head>   
<title>Title</title>  
<style type="text/css">
    body{
    position: absolute;
    margin:0px;
    left:0px;
    top:0px;
    }
</style>
<script type="text/javascript"> 
var ctx;  
var mycanvas;
var dtx;
var xy = new Array();  //用来保存鼠标轨迹坐标
//var tts;
var x ; //鼠标X坐标
var y ;//鼠标Y坐标

window.onload=function(){
dtx = document.getElementById("drawCanvas").getContext("2d");
mycanvas = document.getElementById("myCanvas");
ctx = mycanvas.getContext("2d");
ctx.lineWidth = 1; //线宽
dtx.lineWidth = 1;
//ctx.lineCap = "round"; //线头样式
//tts = document.getElementById("tts");  //方便调试
mycanvas.onmousedown = startmove;   //监听mycanvas的鼠标按下事件
document.documentElement.onmouseup = stopmove;  //监听鼠标移动事件
}


//绘画函数
function drowPad(e)
{
   ctx.save();
   ctx.beginPath();
   ctx.moveTo(x,y);
   ctx.lineTo(e.clientX-2,e.clientY-2); //cilentX获得的坐标是相对文档的坐标，我设置了mycanvas的边框为2像素，所以要减去2
   ctx.stroke();
   x = e.clientX-2;
   y = e.clientY-2;
   ctx.restore();
   xy.push([x,y]);//把坐标添加到数组
   //tts.innerHTML = x+","+y;
}

//开始绘制的入口
function startmove(e)
{
    x = e.clientX-2; //获得鼠标按下的第一点的坐标
    y = e.clientY-2;
    xy.push([x,y]);//添加到数组
    mycanvas.onmousemove = drowPad;//监听mycanvas的鼠标移动事件
    
}

//鼠标按键被放开时执行
function stopmove(e)
{
    mycanvas.onmousemove = null; //取消mycanvas鼠标移动监听事件
    xy.push([0.1,0]);//把特定的值增加到数组，用于标记此次绘画结束，恢复绘画时用到
}



//根据数组记录的鼠标轨迹重新恢复画出的图形
function drowDTX()
{
dtx.clearRect(0,0,400,300); //先清空mycanvas，避免累计绘制产生重叠
 dtx.save();
    
    for(var a = 0; a < xy.length; a++)
    {
       
        if(xy[a+1][0] == 0.1) //根据数组特定标记判断是否是此次绘画的结束点
        {
            a+=2;
            continue;
        }
        if(xy[a][0] == 0.1)  //根据数组特定标记判断是否是此次绘画的结束点
        {
            a++;
            continue;
        }
        dtx.beginPath();
        dtx.moveTo(xy[a][0],xy[a][1]);
        dtx.lineTo(xy[a+1][0],xy[a+1][1]);
        dtx.stroke();
    }
    dtx.restore();
//tts.innerHTML = xy.length; 
}


</script>   
</head>   
<body  onselectstart = "return false;">   
<canvas  style="border: 2px solid #000000"  id="myCanvas" width="400" height="300">浏览器不支持canvas标签</canvas>
<canvas  style="border: 2px solid #000000"  id="drawCanvas" width="400" height="300">浏览器不支持canvas标签</canvas>

<p id="tts"></p>
<input type="button" value="重画" onclick="drowDTX()">
</body>   
</html>

posted on 2012-01-06 17:02  东方泛起鱼肚白  阅读(2946)  评论(0)  编辑  收藏  举报

导航