42 lines
1.2 KiB
JavaScript
42 lines
1.2 KiB
JavaScript
var Point = /** @class */ (function () {
|
|
function Point(x, y) {
|
|
this.x = x;
|
|
this.y = y;
|
|
}
|
|
return Point;
|
|
}());
|
|
function createStroke(ctx, points) {
|
|
ctx.moveTo(points[0].x, points[0].y);
|
|
for (var i = 1; i < points.length; i++) {
|
|
ctx.lineTo(points[i].x, points[i].y);
|
|
}
|
|
ctx.stroke();
|
|
}
|
|
window.onload = function () {
|
|
var canvas = document.getElementById("draw-area");
|
|
var ctx = canvas.getContext("2d");
|
|
var lastPoint = null;
|
|
var points = [];
|
|
var box = canvas.getBoundingClientRect();
|
|
var addPointsToArray = false;
|
|
canvas.addEventListener('mousemove', function (ev) {
|
|
if (addPointsToArray) {
|
|
var point = new Point(ev.clientX - box.x, ev.clientY - box.y);
|
|
if (lastPoint != null) {
|
|
createStroke(ctx, [lastPoint, point]);
|
|
}
|
|
lastPoint = point;
|
|
points.push(point);
|
|
}
|
|
});
|
|
canvas.addEventListener('mousedown', function (ev) {
|
|
addPointsToArray = true;
|
|
});
|
|
canvas.addEventListener('mouseup', function (ev) {
|
|
addPointsToArray = false;
|
|
lastPoint = null;
|
|
console.log(points);
|
|
points = [];
|
|
});
|
|
};
|