devnieL
1/13/2012 - 9:41 PM

whiteboard.html

whiteboard.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function(){
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var x,y,n;
var rec = new Array();
  
canvas.onmousedown = function(e) {
    x = e.x;
    y = e.y;
    ctx.moveTo(x, y);       
}
    
canvas.onmouseup = function(e) {
    x = "space";
    y = "space";
    n = rec.length;        
    rec[n] = new Array(x,y);
    x = null;
    y = null;
}

canvas.onmousemove = function(e) {
    if (x == null || y == null) return false;
    x = e.x;
    y = e.y;
    n = rec.length;        
    rec[n] = new Array(x,y);    
    ctx.lineTo(x, y);
    ctx.moveTo(x, y);
    ctx.stroke();
}

function redraw(rec){
    var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");
    var i=0;
    canvas.width = canvas.width;
    var animation = setInterval(function(){
        var m = rec[i][0];
        var n = rec[i][1];
        ctx.lineTo(m,n);
        ctx.stroke();
        if((rec[i+1][0] == "space") && ((i+2)<(rec.length-1))){
            ctx.moveTo(rec[i+2][0],rec[i+2][1]);
            i+=2;
        }else
            i++;
        if(i==(rec.length-1))clearTimeout(animation);
    },50);
}

document.querySelector("#redraw").onclick = function(){
    redraw(rec);
}
};
</script>
<style type="text/css">
canvas {
    border: 1px solid #CCC;
}
</style>
</head>
<body>
<canvas width="400px" height="400px">
</canvas>
<button id="redraw">Dibujar</button>
</body>
</html>