Canvas拼图切图不模糊、不失真的关键是：确保源图尺寸能被拼图格数整除，canvas的width/height属性值与CSS显示尺寸一致，使用naturalWidth/Height计算整数块尺寸，drawImage时用整数坐标，禁用图像平滑（ctx.imageSmoothingEnabled = false）。
canvas拼图怎么切图不模糊、不失真
直接用 drawImage 按坐标裁剪会出锯齿或偏移，核心是保证源图尺寸能被拼图格数整除，且 canvas 的 width/height 属性值和 CSS 显示尺寸一致。否则浏览器缩放渲染导致像素错位。
- 加载图片后，先读取
naturalWidth和naturalHeight，算出单块宽高：pieceWidth = Math.floor(img.naturalWidth / cols) - 把 canvas 的
width和height设为pieceWidth * cols和pieceHeight * rows，别靠 CSS 拉伸 - 绘制时用整数坐标，避免
Math.round(x)后还传小数给drawImage - 禁用图像平滑：
ctx.imageSmoothingEnabled = false（Chrome/Firefox 支持，Safari 需加前缀-webkit-image-smoothing-enabled）
怎么生成可拖拽的拼图块并保留原始位置信息
不能只存 DOM 元素位置，得维护一个逻辑坐标系统：每块记录它“该在哪儿”（targetRow/targetCol）和“当前在哪儿”（currentRow/currentCol），点击/拖拽时只改 current 值，最后校验是否全部匹配。
- 初始化时用二维数组存所有块对象：
pieces[i][j] = { imgX, imgY, targetRow: i, targetCol: j, currentRow: i, currentCol: j } - 拖拽起点用
getBoundingClientRect()算 canvas 内坐标，再转成格子索引：Math.floor(x / pieceWidth) - 交换两块位置时，只交换它们的
currentRow/currentCol，不要重绘整个 canvas —— 用clearRect清局部，再重绘这两块 - 空格（空白块）必须单独标记，比如设
isEmpty = true，所有操作绕开它
鼠标拖拽卡顿、响应延迟怎么优化
问题不在事件绑定，而在每帧都全量重绘 canvas。高频 mousemove 下，requestAnimationFrame + 差分更新才是关键。
- 把拖拽状态存在变量里：
draggingPiece和offsetX/offsetY（鼠标相对块左上角的偏移） -
mousemove里只更新坐标变量，不绘图；用requestAnimationFrame统一驱动绘制函数 - 绘制时：先清全画布（或仅清旧位置+新位置区域），再遍历所有块 —— 非拖拽块按
currentRow/Col绘，拖拽块用实时mouseX - offsetX定位 - 移动端要同时监听
touchstart/move/end，且preventDefault()在touchmove里加，否则页面会滚动
拼图完成判定总出错？检查这三点
常见误判不是逻辑错，而是状态没同步或浮点误差干扰了相等判断。
立即学习“前端免费学习笔记（深入）”；
- 别用
JSON.stringify(pieces)对比 —— 数组顺序可能变，且对象引用不同；应逐块比piece.currentRow === piece.targetRow && piece.currentCol === piece.targetCol - 空格块不参与判定，但它的位置影响其他块能否归位，所以判定前先确认空格在右下角（或预设位置）
- 如果用了随机打乱算法（如 Fisher-Yates），确保它生成的是可解排列 —— 4×4 拼图需校验逆序数奇偶性，否则有 50% 概率无解
最易忽略的是图片加载完成前就初始化拼图数据，img.onload 外围没包好，导致 naturalWidth 为 0，后续所有坐标计算全偏。务必等 load 回调里再建 pieces 数组。
