canvas如何实现拖拽生成新的节点

要在 Canvas 中实现拖拽生成新的节点，可以通过监听鼠标事件来实现。

具体实现步骤如下：

1. 监听 `mousedown` 事件，记录鼠标点击的位置。

var isDragging = false;  // 是否正在拖拽
var startX, startY;  // 鼠标点击的起始位置

canvas.addEventListener('mousedown', function(e) {
  startX = e.clientX;
  startY = e.clientY;
  isDragging = true;
});

2. 监听 `mousemove` 事件，当正在拖拽时，绘制新的节点。

canvas.addEventListener('mousemove', function(e) {
  if (isDragging) {
    var x = e.clientX;
    var y = e.clientY;
    var width = x - startX;  // 新节点的宽度
    var height = y - startY;  // 新节点的高度

    // 绘制新节点
    ctx.beginPath();
    ctx.rect(startX, startY, width, height);
    ctx.stroke();
  }
});

3. 监听 `mouseup` 事件，完成拖拽并生成新节点。

canvas.addEventListener('mouseup', function(e) {
  if (isDragging) {
    isDragging = false;
    var x = e.clientX;
    var y = e.clientY;
    var width = x - startX;  // 新节点的宽度
    var height = y - startY;  // 新节点的高度

    // 绘制新节点
    ctx.beginPath();
    ctx.rect(startX, startY, width, height);
    ctx.stroke();
  }
});

完整的实现代码如下：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var isDragging = false;  // 是否正在拖拽
var startX, startY;  // 鼠标点击的起始位置

canvas.addEventListener('mousedown', function(e) {
  startX = e.clientX;
  startY = e.clientY;
  isDragging = true;
});

canvas.addEventListener('mousemove', function(e) {
  if (isDragging) {
    var x = e.clientX;
    var y = e.clientY;
    var width = x - startX;  // 新节点的宽度
    var height = y - startY;  // 新节点的高度

    // 绘制新节点
    ctx.beginPath();
    ctx.rect(startX, startY, width, height);
    ctx.stroke();
  }
});

canvas.addEventListener('mouseup', function(e) {
  if (isDragging) {
    isDragging = false;
    var x = e.clientX;
    var y = e.clientY;
    var width = x - startX;  // 新节点的宽度
    var height = y - startY;  // 新节点的高度

    // 绘制新节点
    ctx.beginPath();
    ctx.rect(startX, startY, width, height);
    ctx.stroke();
  }
});

在这个基础上，可以通过添加节点属性、拖拽节点等操作，实现更复杂的功能。