首页写html代码，鼠标点击绘制点，鼠标点击绘制的点长按移动鼠标拖拽

写html代码，鼠标点击绘制点，鼠标点击绘制的点长按移动鼠标拖拽

时间: 2023-10-12 13:05:11 浏览: 87

对于你的问题，你可以使用以下代码实现： ```html <!DOCTYPE html> <html> <head> <title>点击绘制点</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="myCanvas" width="500" height="500"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var isDrawing = false; function drawPoint(x, y) { context.fillRect(x, y, 1, 1); } canvas.addEventListener('mousedown', function(event) { isDrawing = true; drawPoint(event.offsetX, event.offsetY); }); canvas.addEventListener('mousemove', function(event) { if(isDrawing) { drawPoint(event.offsetX, event.offsetY); } }); canvas.addEventListener('mouseup', function(event) { isDrawing = false; }); </script> </body> </html> ``` 这是一个使用 HTML 和 JavaScript 实现的简单绘图应用，可以让你使用鼠标点击和长按移动来绘制点。代码中使用 Canvas 标签创建了一个绘图区域，并且监听了鼠标事件来实现绘制。其中，`drawPoint()` 函数用来绘制单个点，`isDrawing` 变量用来记录鼠标是否处于绘制状态。你可以将代码复制粘贴到一个 HTML 文件中，然后用浏览器打开该文件来运行应用。

阅读全文