用canvas 实现矩形的移动（点、线、面）（1）

本文首发在公众号： 前端图形 持续分享前端可视化知识

前言

在canvas中实现图片移动、实现矩形移动，大家可能看的很多了。但是我为什么还要去写这样的一篇文章呢，因为笔者曾经做到3维图形下的移动。包括移动一个立方体上的一条边线、一个面、移动多边形的一个点。最近一直在写canvas的相关的文章,想着复习下，读完本篇文章你可以学到，通过移动矩形的一个点， 一个条边线，以及整个面的移动。本篇文章从浅到深，希望你耐心读下去。

面的移动

试想一下，在canvas 下实现移动功能。第一步肯定创建canvas 并对canvas 添加move 事件， 这样我们实时获取到我们鼠标的位置，然后我们只需要不断的清除画布，然后重新画矩形。就OK了，面的移动初步实现。我在下面写点的移动会把这里重写了， 这里先写个快速简易版本的。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const width = 100;
const height = 100;
drawRect();
function drawRect(x = 10,y = 10, scale = 1) {
   
    ctx.clearRect( 0, 0, 1800, 800 );
    const halfwidth = width * scale / 2;
    const halfheight = height * scale / 2;
    ctx.strokeRect(x - halfwidth, y - halfheight,width * scale, height * scale)
}
let isMove =  true;
canvas.addEventListener('mousemove',(e)=>{
   
    if(!isMove) {
   
        return 
    }
    const x = e.clientX;
    const y = e.clientY;
    drawRect(x,y)
})
canvas.addEventListener('click',(e)=> {
   
    isMove = !isMove;
});

isMove变量就是个开关,我们总不能一直移动吧，那也太累了，鼠标点击的就暂停。 对于上文为什么要x - halfwidth, y - halfheight

这里和大家解释下： strokeRect 是从矩形的左上角开始画的，但是呢我想把矩形放在鼠标中心位置， 所以做一个宽度和高度相减就可以完美展示了。

点的移动

首先第一个问题就是？ 我们怎么知道我们选择的是哪一个点呢，这里我做了一个简单的判断就是通过判断鼠标点击的位置和矩形的每个点的位置作比较&