<!DOCTYPE html>
<html>
<body>
<style type="text/css">
*{ margin: 0;
padding: 0;
}
canvas{ display: block;
margin: auto;
}
</style>
<script>
window.onload = function(){ var c = document.createElement("canvas"); c.setAttribute("width", window.innerWidth); c.setAttribute("height", window.innerHeight); //c.setAttribute("style", "margin=auto");
lapiz("blue",4) document.body.appendChild(c);
var ctx = c.getContext('2d'); var pintar;
function lapiz(color,tamaño){ c.onmousedown = function(e) { ctx.moveTo(e.pageX - c.offsetLeft + tamaño, e.pageY - c.offsetTop);
pintar = true;
};
c.onmousemove = function(e) { if (pintar) { ctx.lineTo(e.pageX - c.offsetLeft, e.pageY - c.offsetTop);
ctx.lineWidth = tamaño;
ctx.strokeStyle = color;
ctx.stroke();
}
};
c.onmouseup = function() { pintar = false;
};
c.onmouseout = function(){ pintar = false;
};
}
};
</script>
</body>
</html>
Crear cuenta
Comentarios sobre la versión: 0.8 (3)