<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽小方块</title> <style> #canvas { cursor: default; border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="400" height="400">Canvas not supported</canvas> <p>拖拽方块并实时重绘</p> </body> <script> 'use strict'; let canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), //初始时的矩形属性 initX = 10, initY = 10, initWidth = 100, initHeight = 100, isDrag = false, //多边形存储在这个地方 polygons = { fillStyle: 'lightgray', strokeStyle: 'blue', loc: {x: 0, y: 0}, height: initHeight, width: initWidth, offsetX: 0, offsetY: 0 }; //Function…… /** * 绘制初试状态的矩形 */ let drawInitRect = () => { context.fillStyle = polygons.fillStyle; context.strokeStyle = polygons.strokeStyle; context.rect(initX, initY, initWidth, initHeight); polygons.loc.x = initX; polygons.loc.y = initY; polygons.width = initWidth; polygons.height = initHeight; context.fill(); context.stroke(); }; //Event…… /** * 当鼠标按下式 * @param ev */ canvas.onmousedown = ev => { isDrag = context.isPointInPath(ev.clientX, ev.clientY); polygons.offsetX = ev.clientX - polygons.loc.x; polygons.offsetY = ev.clientY - polygons.loc.y; polygons.loc.x = ev.clientX; polygons.loc.y = ev.clientY; }; /** * 鼠标移动时 * @param ev */ canvas.onmousemove = ev => { if (isDrag) { context.beginPath(); context.clearRect(0, 0, canvas.width, canvas.height); context.rect(ev.clientX - polygons.offsetX, ev.clientY - polygons.offsetY, initWidth, initHeight); context.fill(); context.stroke(); } else { //鼠标经过的时候是否需要变小手 if (context.isPointInPath(ev.clientX, ev.clientY)) { //设置光标状态 canvas.style.cursor = 'pointer'; } else { canvas.style.cursor = 'default'; } } }; canvas.onmouseup = ev => { isDrag = false; polygons.loc.x = ev.clientX - polygons.offsetX; polygons.loc.y = ev.clientY - polygons.offsetY; }; //Init…… drawInitRect(); </script> </html>
