Starting to clean up the project.
This commit is contained in:
parent
ca48de36d8
commit
33592730dd
@ -1,10 +1,12 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="links/main.css"/>
|
||||
<script type="text/javascript" src="scripts/position.js"></script>
|
||||
<script type="text/javascript" src="scripts/pointer.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="myCanvas" width="400" height="400" style="background:#efefef"></canvas>
|
||||
<input id ='commander'/>
|
||||
<script type="text/javascript" src="scripts/main.js"></script>
|
||||
</body>
|
||||
</html>
|
@ -2,43 +2,14 @@ var pointer = new Pointer();
|
||||
var canvas = document.getElementById('myCanvas');
|
||||
var context = canvas.getContext('2d');
|
||||
|
||||
function writeMessage(canvas, message) {
|
||||
var context = canvas.getContext('2d');
|
||||
// context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
context.font = '12pt Calibri';
|
||||
context.fillStyle = 'black';
|
||||
context.fillText(message, 10, 25);
|
||||
}
|
||||
|
||||
function getMousePos(canvas, evt)
|
||||
{
|
||||
var rect = canvas.getBoundingClientRect();
|
||||
return new Position(evt.clientX - rect.left,evt.clientY - rect.top);
|
||||
}
|
||||
|
||||
canvas.addEventListener('mousemove', function(evt) {
|
||||
pointer.position = getMousePos(canvas, evt);
|
||||
pointer.draw();
|
||||
// var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
|
||||
// writeMessage(canvas, message);
|
||||
// draw_pixel(context,mousePos.x,mousePos.y);
|
||||
canvas.addEventListener('mousemove', function(e) {
|
||||
pointer.draw(e);
|
||||
}, false);
|
||||
|
||||
canvas.addEventListener('mousedown', function(evt) {
|
||||
canvas.addEventListener('mousedown', function(e) {
|
||||
pointer.can_draw = true;
|
||||
}, false);
|
||||
|
||||
canvas.addEventListener('mouseup', function(evt) {
|
||||
canvas.addEventListener('mouseup', function(e) {
|
||||
pointer.can_draw = false;
|
||||
}, false);
|
||||
|
||||
function draw_pixel(context,x,y)
|
||||
{
|
||||
var id = context.createImageData(1,1);
|
||||
var d = id.data;
|
||||
d[0] = 0;
|
||||
d[1] = 0;
|
||||
d[2] = 0;
|
||||
d[3] = 255;
|
||||
context.putImageData(id,x,y);
|
||||
}
|
||||
}, false);
|
@ -3,7 +3,7 @@ function Pointer()
|
||||
this.position = new Position();
|
||||
this.can_draw = false;
|
||||
|
||||
this.draw = function()
|
||||
this.draw = function(e)
|
||||
{
|
||||
if(this.can_draw === false){return;}
|
||||
|
||||
@ -13,6 +13,12 @@ function Pointer()
|
||||
d[1] = 0;
|
||||
d[2] = 0;
|
||||
d[3] = 255;
|
||||
context.putImageData(id,this.position.x,this.position.y);
|
||||
context.putImageData(id,e.clientX,e.clientY);
|
||||
}
|
||||
|
||||
this.position = function()
|
||||
{
|
||||
var rect = canvas.getBoundingClientRect();
|
||||
return new Position(evt.clientX - rect.left,evt.clientY - rect.top);
|
||||
}
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user