如何在HTML畫布中獲取正確的鼠標坐標
[英]How to get correct mouse coordinates in HTML canvas
問題描述
自從我為響應式設計設置HTML畫布樣式以來，我的鼠標坐標已經完全偏離了方向。 當它沒有樣式並且恰好在屏幕的左上方時，它可以完美地工作。 但是現在縮小了瀏覽器窗口或在移動設備上使用時，光標將不會在應該繪制的位置上繪制，即恰好在繪制路徑上，而不是其上方或下方的幾個像素。 下面是我的代碼，任何幫助將不勝感激
function init() { // Get the specific canvas element from the HTML document canvas = document.getElementById('c'); } function midPointBtw(p1, p2) { return { x: p1.x + (p2.x - p1.x) / 2, y: p1.y + (p2.y - p1.y) / 2 }; } function getPattern() { return ctx.createPattern(img, 'repeat'); } var el = document.getElementById('c'); var ctx = el.getContext('2d'); ctx.lineWidth = 30; ctx.lineJoin = ctx.lineCap = 'round'; var img = new Image; img.onload = function() { ctx.strokeStyle = getPattern(); }; img.src = "https://i.postimg.cc/rF2R0GRY/dick2.png"; var isDrawing, points = []; var getXY = function(e) { var source = e.touches ? e.touches[0] : e; return { x: source.clientX, y: source.clientY }; }; var startDrawing = function(e) { isDrawing = true; points.push(getXY(e)); event.preventDefault(); }; var keepDrawing = function(e) { if (!isDrawing) return; points.push(getXY(e)); ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); var p1 = points[0]; var p2 = points[1]; ctx.moveTo(p1.x, p1.y); for (var i = 1, len = points.length; i < len; i++) { var midPoint = midPointBtw(p1, p2); ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y); p1 = points[i]; p2 = points[i + 1]; } ctx.lineTo(p1.x, p1.y); ctx.stroke(); event.preventDefault(); }; var stopDrawing = function() { isDrawing = false; points = []; }; el.addEventListener('touchstart', startDrawing); el.addEventListener('mousedown', startDrawing); el.addEventListener('touchmove', keepDrawing); el.addEventListener('mousemove', keepDrawing); el.addEventListener('touchend', stopDrawing); el.addEventListener('mouseup', stopDrawing); function clearCanvas(canvas, ctx) { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath() }
@import url('https://fonts.googleapis.com/css?family=Montserrat+Alternates'); @media screen and (max-width: 425px) { html, body { overflow-x: hidden; width: 100%; margin: 0; } #logo { margin: 0 auto; display: block; margin-bottom: 15px; margin-top: 15px; } .container1 { background-color: #313131; border-radius: 20px; border: 3px solid #0BF446; height: 250px; } #grphc1 { margin: 0 auto; display: block; margin-top: 35px; } #canvasintro { border-radius: 20px 0px 20px 0px; border: 3px solid #0BF446; color: white; background-color: #0BF446; font-size: 16px; text-align: left; font-family: 'Montserrat Alternates', sans-serif; margin-left: 15px; margin-right: 15px; margin-top: 35px; padding: 20px; } canvas { border: 3px solid #0BF446; border-radius: 15px 0px 15px 0px; display: block; margin: 0 auto; margin-top: 35px; background-color: #313131; position: relative; } #download { background-color: #04A12B; border-radius: 0 15px 0 15px; padding: 20px 40px; margin: 0 auto; display: block; font-size: 14px; margin-top: 35px; color: white; font-family: 'Montserrat Alternates', sans-serif; } #clearbutton { background-color: #04A12B; border-radius: 0 15px 0 15px; padding: 20px; margin: 0 auto; display: block; font-size: 14px; color: white; font-family: 'Montserrat Alternates', sans-serif; margin-top: 35px; } #footer1 { background-color: #00671A; border-radius: 30px 30px 0px 0px; text-align: center; padding: 30px; margin-top: 35px; } #about { color: white; font-size: 16px; font-family: 'Montserrat Alternates', sans-serif; } }
<!DOCTYPE html> <html> <head> <title>Elemental</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body onload="init()"> <a href="../homepage.html"><img src="minilogo.png" id="logo"></a> <div class="container1"> <img src="leaf.png" id="grphc1"> </div> <div id="canvasintro">Feel free to draw or doodle down below with this natural element of design</div> <canvas id="c" width="350px" height="350px"></canvas> <button id="download">Download</button> <input type="submit" value="Clear Sketchpad" id="clearbutton" onclick="clearCanvas(canvas,ctx);"> <footer id="footer1"> <a href="../about.html" id="about">About Elemental</a> </footer> </body> </html>
1 個解決方案
解決方案1
2 2019-04-02 23:40:45
首先，您的新圖片構造函數缺少要調用的paren：
var img = new Img();
但是在您的getXY()函數中，返回offsetX和offsetY而不是clientX和clientY ：
var getXY = function(e) {
var source = e.touches ? e.touches[0] : e;
return {
x: source.offsetX,
y: source.offsetY
};
};
在此，“客戶端”是指視口，而“偏移”是對目標節點或畫布本身的填充邊的引用。
您還應該添加mouseout和touchcancel事件處理程序：
el.addEventListener('mouseout', stopDrawing);
el.addEventListener('touchcancel', stopDrawing);
如何獲得在HTML5畫布上單擊的坐標？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.