Bonjour, j'ai essayé de mettre en place le canvas afin de pouvoir dessiner avec.
Cependant, quand je dessine, il y a un écart important entre le pointeur et le dessin du trait.
J'ai voulu décaler mon canvas un peu vers le bas, et je pense que c'est ça qui crée un décalage. Auriez-vous une idée de comment faire que mon pointeur soit bien au même endroit que la ligne que je trace?
<!DOCTYPE html>
<html>
<head>
<title>Test web</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="page5style.css" />
<link rel="stylesheet" href="navstyle.css" />
</head>
<body>
<div id="circleRed"></div>
<canvas></canvas>
<script src="page5script.js"></script>
</body>
</html>
canvas{
border: 2px solid #ebdede;
position: relative;
top: 55px;
}
#circleRed{
width: 50px;
height: 50px;
background-color: red;
border-radius: 50px;
}
#circleRed:hover{
border: 5px solid #f67e7e;
box-sizing: border-box;
animation: circleRedBorder 300ms;
}
@keyframes circleRedBorder{
0%{border: 0px;}
20%{border: 1px;}
40%{border: 2px;}
60%{border: 3px;}
80%{border: 4px;}
100%{border:5px;}
}
// mise en place du canvas
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
// booléens
let painting = false;
function paintingOn(){
painting = true;
}
function paintingOff(){
painting = false;
ctx.beginPath();
}
function draw(e){
if(!painting) return;
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.strokeStyle() = "red";
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
ctx.beginPath(); //less pixelated
ctx.moveTo(e.clientX, e.clientY);
}
canvas.addEventListener("mousedown", paintingOn);
canvas.addEventListener("mouseup", paintingOff);
canvas.addEventListener("mousemove", draw);
document.getElementById("circleRed").addEventListener("click",function(){
ctx.strokeStyle() = "red";
});
Afficher la suite
