<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="https://github.com/donovosoft/jdonovosoft/blob/1.0/donovosoft.js"></script>
<script type="text/javascript">
///Execute function after page finishes load
$_.onLoad(function(){
/*
* $_.Drawing({ element: document.getElementById("canvas"), lineWidth: 10,
* lineColor: #FFFFFFF });
*
*/
var draw = $_.drawing({
element: document.getElementById("canvas"),
lineWidth: 1,
lineColor: '#FFFFFFF'
});
//Add events to buttons
$_.addEvent('click',document.getElementById("limpiar"),function(){
draw.clear();
});
$_.addEvent('click',document.getElementById('ajustar'),function(){
draw.setProperties({
lineWidth: document.getElementById('width').value,
lineColor: document.getElementById('color').value
});
});
$_.addEvent('click',document.getElementById('guardar'),function(){
draw.save('gif',function(image){
window.open(image);
});
});
var start = 1;
$_.addEvent('click',document.getElementById('stop'),function(){
if(start == 1){
draw.stop();
start = 0
document.getElementById('stop').value = "Continuar Trazo"
}else{
draw.continueDraw();
document.getElementById('stop').value = "Detener Trazo"
start = 1;
}
});
$_.addEvent('blur',document.getElementById('imagen'),function (){
draw.loadPicture(document.getElementById('imagen').value,
{posx:0,posy:0,swidth:100,sheight:100},function(img){
alert(img);
});
});
});
</script>
<title>Insert title here</title>
</head>
<body>
<table>
<tr><td>Ancho de Linea: </td><td><input type="text" id="width" /></td></tr>
<tr><td>Color: </td><td><input type="text" id="color" /></td></tr>
<tr><td>Imagen: </td><td><input type="text" id="imagen" /></td></tr>
<tr><td colspan="2">
<input type="button" id="guardar" value="Guardar"/> <input type="button" id="limpiar" value="Limpiar" />
<input type="button" id="ajustar" value="Ajustar"/>
<input type="button" id="stop" value="Detener Trazo"/>
</td></tr>
</table>
<canvas id="canvas" width="1000px" height="800px" style="border: red 1px solid">
</canvas>
</body>
</html>
Transforms a CANVAS tag into a freehand editor, should be used on a browser with HTML5 support .
Properties:
element: The object canvas
lineWidth: Anchor of the drawing line
lineColor: Color of the drawing line
Properties:
element: The object canvas
lineWidth: Anchor of the drawing line
lineColor: Color of the drawing line
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.