如何在HTML Canvas上用鼠标绘制矩形？计时器为何无法显示？

我来帮你搞定这两个问题！咱们先从计时器的问题入手，再解决Canvas绘制矩形的需求~

一、计时器无法显示的问题 #

你当前的JavaScript代码里用了createP()和timer.html()这些方法，这是p5.js框架的语法，但你的项目里并没有引入p5.js库，所以浏览器根本不认识这些函数，自然无法更新计时器内容。我们改成原生JavaScript的写法就能解决：

修正后的计时器代码 #

// 获取页面上的timer元素
var timer = document.getElementById('timer');
var counter = 0;

// 启动计时器，setInterval的时间单位是毫秒，这里设为1000就是每秒更新一次
setInterval(timeIt, 1000);

function timeIt() {
  // 用原生的textContent更新文本内容
  timer.textContent = counter;
  // 这里你原来写的counter+=134，如果你是想每秒加1可以改成counter++
  counter += 1;
}

注意哦：setInterval的第二个参数是毫秒数，你原来写的1会让函数每秒执行1000次，非常消耗性能，一般计时器用1000毫秒（1秒）更新一次就够啦。

二、Canvas上用鼠标绘制矩形的实现 #

要实现鼠标绘制矩形，我们需要监听三个鼠标事件：mousedown（记录起始坐标）、mousemove（实时绘制矩形）、mouseup（停止绘制）。具体实现如下：

完整的JavaScript代码（包含计时器和矩形绘制） #

var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var c = canvas.getContext('2d');

// ---------------------- 计时器部分 ----------------------
var timer = document.getElementById('timer');
var counter = 0;
setInterval(timeIt, 1000);

function timeIt() {
  timer.textContent = counter;
  counter++;
}

// ---------------------- 矩形绘制部分 ----------------------
let isDrawing = false;
let startX, startY;

// 鼠标按下时记录起始位置
canvas.addEventListener('mousedown', function(e) {
  isDrawing = true;
  // 获取鼠标在Canvas内的坐标（要减去Canvas的偏移量）
  const rect = canvas.getBoundingClientRect();
  startX = e.clientX - rect.left;
  startY = e.clientY - rect.top;
});

// 鼠标移动时绘制矩形
canvas.addEventListener('mousemove', function(e) {
  if (!isDrawing) return;
  
  // 每次绘制前清除画布，避免留下拖影
  c.clearRect(0, 0, canvas.width, canvas.height);
  
  const rect = canvas.getBoundingClientRect();
  const currentX = e.clientX - rect.left;
  const currentY = e.clientY - rect.top;
  
  // 计算矩形的宽度和高度（要处理从右下往左上绘制的情况）
  const width = currentX - startX;
  const height = currentY - startY;
  
  // 绘制矩形
  c.strokeStyle = 'black';
  c.lineWidth = 1;
  c.strokeRect(startX, startY, width, height);
});

// 鼠标松开时停止绘制
canvas.addEventListener('mouseup', function() {
  isDrawing = false;
});

// 窗口大小改变时重新设置Canvas尺寸
window.addEventListener('resize', function() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});

说明 #

• 我们用isDrawing变量来标记是否处于绘制状态，只有鼠标按下时才会响应移动事件。
• 每次移动鼠标时先清除画布，这样不会留下之前绘制的痕迹；如果需要保留之前画的矩形，可以把清除画布的代码去掉，或者把每个矩形的坐标存起来，每次重绘所有矩形。
• 通过getBoundingClientRect()获取Canvas的位置偏移，确保鼠标坐标在Canvas内是准确的。

完整的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas Resize</title>
  <style>
    canvas { border: 1px solid black; }
    body { margin: 0px; }
    #timer {
      position: fixed;
      top: 10px;
      left: 10px;
      font-size: 20px;
      margin: 0;
    }
  </style>
</head>
<body>
  <canvas></canvas>
  <p id="timer"></p>
  <script src="canvas.js"></script>
</body>
</html>

我给计时器加了固定定位，这样它会一直显示在页面左上角，方便查看~

内容的提问来源于stack exchange，提问作者Rita Duarte