1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
| (function () {
window.addEventListener ('load', function () {
function getMousePos (event) {
var rect = this.getBoundingClientRect();
return {
x: event.clientX - rect.left
y: event.clientY - rect.top
}
}
alert("Bienvenue sur mon application de dessin. Vous pouvez ici dessiner en vous servant de la souris. Lors d'un clic gauche, vous verrez une trace noire apparaître.");
var canvas = document.getElementById('mon_canvas');
if (!canvas) {
alert("Impossible de récupérer le canvas");
return;
}
var context = canvas.getContext('2d');
if (!context) {
alert("Impossible de récupérer le context du canvas");
return;
}
var myhtml = document.getElementsByTagName("html")[0],
mybody = document.getElementsByTagName("body")[0],
bouge;
/*-- Ajuste le canvas --*/
canvas.setAttribute('width', mybody.offsetWidth);
canvas.setAttribute('height', mybody.offsetHeight);
/*-- init du context --*/
context.strokeStyle = "black"
context.lineWidth = "555";
canvas.addEventListener('mousedown', function(e) {
pos = getMousePos.call(this, e)
bouge = true;
context.beginPath();
context.moveTo(pos.x, pos.y);
}, false);
canvas.addEventListener('mousemove', function(e) {
if (bouge == true) {
pos = getMousePos.call(this, e);
context.lineTo(pos.x, pos.y);
context.stroke();
}
}, false);
canvas.addEventListener('mouseup', function() {
context.closePath();
bouge = false;
}, false);
}, false);
})(); |
Partager