- 效果图片
其中的小圆可以移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#canvas {
box-shadow: 0 0 5px #ccc;
border-radius: 10px;
}
.cs {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="cs">
<canvas id="canvas" width="600" height="300"></canvas>
</div>
</body>
<script>
/** @type {HTMLCanvasElement} */
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
var set = {
point: {
x: 100,
y: 100,
r: 5,
},
ePoint: null,
};
// 绘制表格
function drawCell() {
for (var i = 0; i < 141; i++) {
ctx.beginPath();
ctx.moveTo(20 + 4 * i + 0.5, 20);
ctx.lineTo(20 + 4 * i + 0.5, 280);
if (i % 5 == 0) {
ctx.lineWidth = 1;
ctx.strokeStyle = "red";
} else {
ctx.lineWidth = 0.5;
ctx.strokeStyle = "red";
}
ctx.stroke();
}
for (var i = 0; i < 66; i++) {
ctx.beginPath();
ctx.moveTo(20, 20 + 4 * i + 0.5);
ctx.lineTo(580, 20 + 4 * i + 0.5);
if (i % 5 == 0) {
ctx.lineWidth = 1;
ctx.strokeStyle = "red";
} else {
ctx.lineWidth = 0.5;
ctx.strokeStyle = "red";
}
ctx.stroke();
}
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function drawBall() {
const { point } = set;
ctx.beginPath();
ctx.arc(point.x, point.y, point.r, 0, Math.PI * 2);
ctx.strokeStyle = "#000";
ctx.stroke();
}
function DragStart(e) {
const { point } = set;
const obj = filterPoint(e);
if (
obj.x - point.r < point.x &&
obj.x + point.r > point.x &&
obj.y - point.r < point.y &&
obj.y + point.r > point.y
) {
canvas.style.cursor = "move";
set.ePoint = e;
}
}
function Dragging(e) {
const { point, ePoint } = set;
if (
ePoint &&
point.x >= 20 &&
point.y >= 20 &&
point.x <= 580 &&
point.y <= 280
) {
point.x += e.pageX - ePoint.pageX;
point.y += e.pageY - ePoint.pageY;
if (point.x < 20) {
point.x = 20;
}
if (point.y < 20) {
point.y = 20;
}
if (point.x > 580) {
point.x = 580;
}
if (point.y > 280) {
point.y = 280;
}
set.ePoint = e;
clearCanvas();
drawCell();
drawBall();
}
}
function DragEnd(e) {
canvas.style.cursor = "default";
set.ePoint = null;
clearCanvas();
drawCell();
drawBall();
}
function filterPoint(e) {
const top = canvas.offsetTop;
const left = canvas.offsetLeft;
return {
x: e.pageX - left,
y: e.pageY - top,
};
}
function init() {
clearCanvas();
drawCell();
drawBall();
canvas.onmousedown = DragStart;
canvas.onmousemove = Dragging;
canvas.onmouseup = canvas.onmouseout = DragEnd;
}
init();
</script>
</html>
标签：function,canvas,线格,20,point,ctx,set,图形 From： https://www.cnblogs.com/yanjuntao/p/17248458.html