gpt4 book ai didi

javascript - 由于未知原因,控制台无法识别 clientX

转载 作者:行者123 更新时间:2023-11-30 14:01:35 25 4
gpt4 key购买 nike

我正在创建一个绘图应用程序,但出于某种原因,控制台无法识别 clientXclientY

我已尝试在 chrome 上禁用设备模式,但错误仍然存​​在

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<link href="canvas.css" rel="stylesheet">
</head>
<body>
<div id="container">
<canvas id="canvas"></canvas>
</div>
</body>
<script src="canvas.js"></script>
</html>
#canvas{
border: 1px solid black;
}
#container{
text-align: center;
}
        window.addEventListener('load', () => {
const canvas = document.querySelector("#canvas");
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
const ctx = canvas.getContext("2d");

let painting = false;

function startPosistion(e){
painting = true;
draw(e);
}
function endPosistion(){
painting = false;
ctx.beginPath();
}
function draw(e){
if(!painting) return;
ctx.lineWidth = 10;
ctx.lineCap = 'round';

ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(e.clientX, e.clientY);
}

canvas.addEventListener('mousedown', startPosistion());
canvas.addEventListener('mouseup', endPosistion());
canvas.addEventListener('mousemove', draw);


});

我希望当用户按下鼠标时,会出现一条线。当用户释放线时,线不再拖动。

最佳答案

改变了

    canvas.addEventListener('mousedown', startPosistion());
canvas.addEventListener('mouseup', endPosistion());
canvas.addEventListener('mousemove', draw);

    canvas.addEventListener('mousedown', startPosistion);
canvas.addEventListener('mouseup', endPosistion);
canvas.addEventListener('mousemove', draw);

关于javascript - 由于未知原因,控制台无法识别 clientX,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56228899/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com