javascript利用canvas实现鼠标拖拽功能

下面是关于“javascript利用canvas实现鼠标拖拽功能”的完整攻略：

下面是关于“javascript利用canvas实现鼠标拖拽功能”的完整攻略：

什么是canvas？

Canvas是HTML5中的一个新特性，是一个可以用脚本(通常为JavaScript)在其中绘制图形的HTML元素。Canvas有两种绘制路径：一种是通过命令式的JavaScript进行绘图；另外一次是通过使用矢量图形编辑器生成并导入路径。

实现鼠标拖拽的步骤

第一步：创建画布和要绘制的图形

为了在画布上实现鼠标拖拽的功能，我们需要先创建一个画布，然后在其上绘制需要被拖拽的图形。这里以绘制一个矩形为例，代码如下：

<canvas id="myCanvas" width="500" height="500"></canvas>

let canvas = document.querySelector('#myCanvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#ff0000';
ctx.fillRect(100, 100, 50, 50);

第二步：监听鼠标事件

在画布上监听鼠标事件，当鼠标按下时记录下鼠标的坐标，当鼠标移动时根据移动距离改变图形的位置，当鼠标松开时停止拖拽。示例代码如下：

let isDragging = false;
let offset = {x: 0, y: 0};
let rect = {x: 100, y: 100, w: 50, h: 50};

canvas.addEventListener('mousedown', function(e) {
  let rectLeft = canvas.offsetLeft;
  let rectTop = canvas.offsetTop;
  let mouseX = e.pageX - rectLeft;
  let mouseY = e.pageY - rectTop;

  if(mouseX >= rect.x && mouseX <= rect.x + rect.w && mouseY >= rect.y && mouseY <= rect.y + rect.h) {
    isDragging = true;
    offset.x = mouseX - rect.x;
    offset.y = mouseY - rect.y;
  }
});

canvas.addEventListener('mousemove', function(e) {
  if(isDragging) {
    let rectLeft = canvas.offsetLeft;
    let rectTop = canvas.offsetTop;
    let mouseX = e.pageX - rectLeft;
    let mouseY = e.pageY - rectTop;
    rect.x = mouseX - offset.x;
    rect.y = mouseY - offset.y;

    draw();
  }
});

canvas.addEventListener('mouseup', function(e) {
  isDragging = false;
});

第三步：重绘图形

当图形的位置发生改变时，需要立即重新绘制图形。示例代码如下：

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#ff0000';
  ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
}

示例

以下是两个示例，一个是鼠标拖拽矩形，另一个是鼠标拖拽图片：

示例1：鼠标拖拽矩形

<canvas id="myCanvas1" width="500" height="500"></canvas>
<script>
let canvas = document.querySelector('#myCanvas1');
let ctx = canvas.getContext('2d');

let isDragging = false;
let offset = {x: 0, y: 0};
let rect = {x: 100, y: 100, w: 50, h: 50};

canvas.addEventListener('mousedown', function(e) {
  let rectLeft = canvas.offsetLeft;
  let rectTop = canvas.offsetTop;
  let mouseX = e.pageX - rectLeft;
  let mouseY = e.pageY - rectTop;

  if(mouseX >= rect.x && mouseX <= rect.x + rect.w && mouseY >= rect.y && mouseY <= rect.y + rect.h) {
    isDragging = true;
    offset.x = mouseX - rect.x;
    offset.y = mouseY - rect.y;
  }
});

canvas.addEventListener('mousemove', function(e) {
  if(isDragging) {
    let rectLeft = canvas.offsetLeft;
    let rectTop = canvas.offsetTop;
    let mouseX = e.pageX - rectLeft;
    let mouseY = e.pageY - rectTop;
    rect.x = mouseX - offset.x;
    rect.y = mouseY - offset.y;

    draw();
  }
});

canvas.addEventListener('mouseup', function(e) {
  isDragging = false;
});

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#ff0000';
  ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
}
</script>

示例2：鼠标拖拽图片

<canvas id="myCanvas2" width="500" height="500"></canvas>
<script>
let canvas = document.querySelector('#myCanvas2');
let ctx = canvas.getContext('2d');

let isDragging = false;
let offset = {x: 0, y: 0};
let img;

img = new Image();
img.src = 'https://picsum.photos/200/300';

img.onload = function() {
  ctx.drawImage(img, 100, 100);
};

canvas.addEventListener('mousedown', function(e) {
  let rectLeft = canvas.offsetLeft;
  let rectTop = canvas.offsetTop;
  let mouseX = e.pageX - rectLeft;
  let mouseY = e.pageY - rectTop;

  if(mouseX >= 100 && mouseX <= 100 + img.width && mouseY >= 100 && mouseY <= 100 + img.height) {
    isDragging = true;
    offset.x = mouseX - 100;
    offset.y = mouseY - 100;
  }
});

canvas.addEventListener('mousemove', function(e) {
  if(isDragging) {
    let rectLeft = canvas.offsetLeft;
    let rectTop = canvas.offsetTop;
    let mouseX = e.pageX - rectLeft;
    let mouseY = e.pageY - rectTop;
    ctx.clearRect(0, 0, 500, 500);
    ctx.drawImage(img, mouseX - offset.x, mouseY - offset.y);
  }
});

canvas.addEventListener('mouseup', function(e) {
  isDragging = false;
});

</script>