手绘风格页面需css模拟质感与canvas绘图结合；坐标须用getboundingclientrect()计算，禁用offsetleft；线条要抖动、圆头、禁抗锯齿；纹理优先svg；移动端需preventdefault()和touchaction:none。
手绘风格页面不是靠“画出来”的，而是用 CSS 模拟手绘质感 + 交互反馈来营造氛围；纯 HTML 无法实现手绘效果，关键在 canvas 绘图逻辑和 CSS 笔触纹理叠加。
canvas 绘图时坐标偏移算错导致线条漂移
常见错误是直接用 event.pageX/event.pageY 当作画布内坐标，但没减去画布在页面中的真实偏移。一旦页面有滚动、外层有 padding/margin 或画布被包裹在定位容器里，线条就会严重偏移。
- 必须用
cvs.getBoundingClientRect()获取实时左上角位置，再计算相对坐标：event.clientX - rect.left - 避免用
this.offsetLeft—— 它不包含滚动偏移，也不响应 transform 变化 - 移动端需额外处理
touchstart/touchmove，且要用touches[0]取点
手绘感靠 strokeStyle + lineCap + lineWidth 配合抖动
原生 canvas 的直线太“干净”，要模拟手绘，得放弃平滑贝塞尔，改用短折线段 + 参数扰动。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
cxt.lineCap = 'round'让线头圆润，避免机械直角 -
cxt.lineWidth不设固定值，可按压力（如有压感）或随机微调（±0.3px） - 每段线用
cxt.lineTo(x + Math.random() * 0.8 - 0.4, y + Math.random() * 0.8 - 0.4)加轻微抖动 - 禁用抗锯齿：
cxt.imageSmoothingEnabled = false，保留硬边质感
背景/边框加手绘纹理不能只靠图片
直接贴 background-image: url(sketch-bg.png) 在高 DPR 屏幕上会模糊，且难以适配不同尺寸。
- 优先用 SVG 纹理：导出带噪点、不规则边缘的 SVG 作为
background-image，缩放不失真 - CSS 边框模拟手绘框：
border: 3px solid transparent; border-image: url(border-sketch.svg) 20 round; - 文字描边加手写感：
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;，比 font-family 更可控
移动端 canvas 手势冲突必须显式阻止默认行为
在 iOS Safari 或部分安卓浏览器中，touchmove 默认触发页面滚动，导致绘图中断或跳变。
- 给
canvas添加touchstart和touchmove事件时，必须调用event.preventDefault() - 同时设置
canvas.style.touchAction = 'none'，禁用浏览器手势识别 - 若需支持双指缩放画布，应单独监听
gesturestart并自行处理，而非依赖默认行为
手绘风格的难点不在“怎么画”，而在“怎么让每一次落笔都像人画的”——坐标精度、线条抖动、纹理缩放、手势拦截，每个环节差一点，整体就回到工业风。别省略 getBoundingClientRect()，也别信“随便加个手绘字体就成”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
