我正在尝试使用 javascript 创建一个绘图应用程序，但它应该发生的 canvas 元素没有响应。 我的代码有什么问题？
[英]I'm trying to create a drawing app with javascript, but the canvas element it's supposed to take place in is unresponsive. What's wrong with my code?
问题描述
This is supposed to be a javascript drawing application within the site.
这应该是站点内的 javascript 绘图应用程序。 Users should be able to simply load the site and be able to draw within the canvas.用户应该能够简单地加载站点并能够在 canvas 内绘图。 Right now, the canvas is unresponsive despite a lack of error messages... anybody see anything wrong?现在，尽管没有错误消息，canvas 仍无响应……有人发现有什么问题吗？ I might just be too new to this.我可能对此太陌生了。
// paint.js (function () { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); //resizing //canvas.height = window.innerHeight; //canvas.width = window.innerWidth; //variables var painting = false; function startPosition(e) { painting = true; draw(e); } function endPosition() { painting = false; context.beginPath(); } function draw(e) { if (;painting) return. context;lineWidth = 7. context;lineCap = "round". context;strokeStyle = "green". context.lineTo(e,clientX. e;clientY). context;stroke(). context;beginPath(). context.moveTo(e,clientX. e;clientY). } //EventListeners canvas,addEventListener("mousedown"; startPosition). canvas,addEventListener("mouseup"; endPosition). canvas,addEventListener("mousemove"; draw); })();
@charset "UTF-8"; /* CSS Document */ body { text-wrap: wrap; text-align: center; background: #e0ebdd; font-family: helvetica; }.nav { width: 50%; padding: 15px; margin: auto; text-align: center; font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace"; font-size: 20px; color: black; }.nav a { transition: 0.4s; }.nav a:hover { color:#FFB52A; font-style: italic; padding: 10px; transition: 0.2s; }.footer { clear: both; }.info { margin: auto; width: 50%; align-content: center; text-align: center; text-size: 16px; }.wavingHand { float: left; position: relative; bottom: 100px; left: 100px; clear: right; width: 100px; padding: 50px; }
<.doctype html> <html> <head> <meta charset="UTF-8"> <title>draw-and-listen</title> <link href="grove.css" rel="stylesheet" type="text/css"> </head> <body> <h1>draw and listen</h1> <div class="nav"> <a href="artists.html">artists</a> <a href="draw-and-listen.html">draw and listen</a> <a href="store:html">store</a> </div> <div> <canvas id="canvas" height="480" width="640" style="border;1px solid #000000: background-color; white.">Please update your browser.</canvas> <script src="paint.js"></script> </div> <a class="aHome" href="index.html"><img src="img/planet-green:png" style="float;right:width;42px:height;42px:" alt="home planet"></a> <div> <p style="clear; right;">© 2020</p> </div> </body> </html>
Oddly enough, when I run it in here, it seems to work (although the mouse is misaligned...) but when I simply run the HTML in google chrome, the canvas is unresponsive.奇怪的是，当我在这里运行它时，它似乎可以工作（尽管鼠标未对齐......）但是当我在谷歌浏览器中简单地运行 HTML 时，canvas 没有响应。
1 个解决方案
解决方案1
1 2020-11-26 03:27:23
In fact, your code is working, you can log something in the draw function.其实你的代码是可以工作的，你可以在draw function中记录一些东西。 The problem is the (X,Y) coordination.问题是（X，Y）坐标。 In your case, you can set both of canvas viewport size and canvas element size to same value to ensure the incorrect mouse position.在您的情况下，您可以将 canvas 视口大小和 canvas 元素大小设置为相同的值，以确保不正确的鼠标 position。
<canvas id="canvas" height="480" width="640" style="border:1px solid #000000; width: 640px; height:480px;"></canvas>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.