wehub-resource-sync
97 lines
1.9 KiB
JavaScript
Executable File
97 lines
1.9 KiB
JavaScript
Executable File
|
|
var drawing = false;
|
|
|
|
var context;
|
|
|
|
var offset_left = 0;
|
|
var offset_top = 0;
|
|
|
|
|
|
function start_canvas ()
|
|
{
|
|
var scribbler = document.getElementById ("the_stage");
|
|
context = scribbler.getContext ("2d");
|
|
scribbler.onmousedown = function (event) {mousedown(event)};
|
|
scribbler.onmousemove = function (event) {mousemove(event)};
|
|
scribbler.onmouseup = function (event) {mouseup(event)};
|
|
for (var o = scribbler; o ; o = o.offsetParent) {
|
|
offset_left += (o.offsetLeft - o.scrollLeft);
|
|
offset_top += (o.offsetTop - o.scrollTop);
|
|
}
|
|
draw();
|
|
}
|
|
|
|
function getPosition(evt)
|
|
{
|
|
evt = (evt) ? evt : ((event) ? event : null);
|
|
var left = 0;
|
|
var top = 0;
|
|
var scribbler = document.getElementById("the_stage");
|
|
|
|
if (evt.pageX) {
|
|
left = evt.pageX;
|
|
top = evt.pageY;
|
|
} else if (document.documentElement.scrollLeft) {
|
|
left = evt.clientX + document.documentElement.scrollLeft;
|
|
top = evt.clientY + document.documentElement.scrollTop;
|
|
} else {
|
|
left = evt.clientX + document.body.scrollLeft;
|
|
top = evt.clientY + document.body.scrollTop;
|
|
}
|
|
left -= offset_left;
|
|
top -= offset_top;
|
|
|
|
return {x : left, y : top};
|
|
}
|
|
|
|
function
|
|
mousedown(event)
|
|
{
|
|
drawing = true;
|
|
var location = getPosition(event);
|
|
context.lineWidth = 20.0;
|
|
context.strokeStyle="#000000";
|
|
context.beginPath();
|
|
context.moveTo(location.x,location.y);
|
|
}
|
|
|
|
|
|
function
|
|
mousemove(event)
|
|
{
|
|
if (!drawing)
|
|
return;
|
|
var location = getPosition(event);
|
|
context.lineTo(location.x,location.y);
|
|
context.stroke();
|
|
}
|
|
|
|
|
|
|
|
function
|
|
mouseup(event)
|
|
{
|
|
if (!drawing)
|
|
return;
|
|
mousemove(event);
|
|
drawing = false;
|
|
}
|
|
|
|
function draw()
|
|
{
|
|
|
|
context.fillStyle = '#ffffff';
|
|
context.fillRect(0, 0, 400, 400);
|
|
|
|
}
|
|
|
|
function clearCanvas()
|
|
{
|
|
context.clearRect (0, 0, 400, 400);
|
|
draw();
|
|
document.getElementById("rec_result").innerHTML = "";
|
|
}
|
|
|
|
onload = start_canvas;
|
|
|