所以這里是代碼：
HTML：
<canvas id="gameCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
JS：
var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");
canvas.addEventListener("click", function (evt) {
var mousePos = getMousePos(canvas, evt);
ctx.beginPath();
ctx.arc(evt.x, evt.y, 50, 0, 2 * Math.PI);
ctx.stroke();
}, false);
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
我遇到的問題是當我嘗試繪畫時，當我點擊時它會在畫布上繪畫，但我想要的是當我將手指放在畫布上時它會繪畫。
編輯：我想要的是制作一個繪畫工具，當我拖動它在畫布上繪制時，我想要它。但是在我的代碼中，當我單擊時它會繪制。我使用的是觸摸屏，所以它需要在手機和電腦上作業。
當我按住畫布然后拖動它時，它不會繼續繪制
這就是我想要的樣子：http: //literallycanvas.com/
uj5u.com熱心網友回復：
// object to store mouse position reading
var mousePosition = {
x: 0,
y: 0
};
function onMouseMove(event) {
// detect possible changes in mouse position
if (mousePosition.x != event.clientX || mousePosition.y != event.clientY ) {
mousePosition.x = event.clientX;
mousePosition.y = event.clientY;
// code to draw goes here ....
}
}
// use mouse move event on the canvas
canvas.addEventListener("mousemove", onm ouseMove);
此外，可以在 onm ouseMove if 子句中設定一個間隔來分隔繪圖步驟。
uj5u.com熱心網友回復：
每次單擊都會觸發一次單擊事件，您從事件中提取的任何資料都與該時刻有關。正如第一個答案所述，mousemove 是您要查看的事件。
我在下面做了一個作業實作，我認為它可以滿足您的需求，它使用三個事件偵聽mousedown器設定一個布林值以啟用繪圖，mousemove觸發繪圖和連續更新，mouseup切換布林值集mousedown以防止繪圖，除非您正在為滑鼠鍍金向下移動滑鼠。
我減小了你的圓的半徑，因為我不確定你到底想畫什么，它現在追蹤滑鼠。
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
let mouseDown = false;
let mouseUp = true;
canvas.addEventListener('mousedown', (event) => {
mouseDown = !mouseDown; // toggle mouseDown true/false;
});
canvas.addEventListener('mousemove', (event) => {
if (mouseDown) {
redraw(event.clientX, event.clientY);
}
});
canvas.addEventListener('mouseup', (event) => {
mouseDown = !mouseDown; // toggle mouseDown true/false;
});
function redraw(X,Y) {
// console.log(X, Y);
ctx.beginPath();
ctx.arc(X, Y, 2, 0, 2 * Math.PI, false);
ctx.stroke();
}<canvas id="gameCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>uj5u.com熱心網友回復：
旁注：mousePos未在原始代碼中使用，這就是為什么它可能會進入移位位置。MouseEvent有offsetX和offsetY，你可以直接使用它們而不是任何額外的計算。
如果您只想在用戶將滑鼠移動到畫布上時進行繪制，無論是否按下按鈕，mousemove您都可以使用以下事件：
<canvas id="gameCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
let canvas = document.getElementById("gameCanvas");
let ctx = canvas.getContext("2d");
canvas.addEventListener("mousemove", function(evt) {
ctx.beginPath();
ctx.arc(evt.offsetX, evt.offsetY, 5, 0, 2 * Math.PI);
ctx.stroke();
});
canvas.addEventListener("touchmove", function(evt) {
ctx.beginPath();
ctx.arc(evt.offsetX, evt.offsetY, 5, 0, 2 * Math.PI);
ctx.stroke();
});
</script>如果你想在滑鼠沒有移動的情況下發生一些事情，只要它在畫布上，就需要某種計時器。這里只是一個簡單的requestAnimationFrame()，對于一個簡單的測驗來說已經足夠了：
<canvas id="gameCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
let canvas = document.getElementById("gameCanvas");
let ctx = canvas.getContext("2d");
let lastevent = false;
let r = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (lastevent) {
ctx.strokeStyle = "rgb(" r ",0,0)";
r = 8;
if (r > 255) r = 0;
ctx.beginPath();
ctx.arc(lastevent.offsetX, lastevent.offsetY, 5, 0, 2 * Math.PI);
ctx.stroke();
requestAnimationFrame(animate);
}
}
canvas.addEventListener("mousemove", function(evt) {
lastevent = evt;
});
canvas.addEventListener("mouseover", function(evt) {
lastevent = evt;
animate();
});
canvas.addEventListener("mouseout", function(evt) {
lastevent = false;
});
</script>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/434319.html
標籤：javascript html 帆布