html怎么转paper.js绘图_Paper.js如何基于HTML Canvas绘图-html教程-PHP中文网

paper.js需显式调用paper.setup()传入canvas元素或id，确保dom已加载；new path()等对象须手动add到activelayer；自动重绘可能失效，需手动view.draw()；canvas尺寸变化时须同步width/height属性及view.viewsize。

html canvas元素怎么被paper.js识别并接管

paper.js 不会自动扫描页面里的 <canvas></canvas> 标签，它需要你显式传入 dom 元素或 id。常见错误是直接写 paper.setup('mycanvas') 却没确认该 <canvas id="mycanvas"></canvas> 已存在于 dom 中（比如脚本执行早于 html 解析）。

确保 <canvas></canvas> 在 <script></script> 执行前已挂载，或把初始化逻辑包在 window.onload / document.addEventListener('DOMContentLoaded', ...) 里
支持传入原生 DOM 元素、ID 字符串、甚至 CSS 选择器（如 paper.setup('#myCanvas')），但不支持 jQuery 对象或伪元素
一个 <canvas></canvas> 只能被 paper.setup() 初始化一次；重复调用会报错 "PaperScope is already active"
若页面有多个 canvas，每个需独立调用 paper.setup() 并保存返回的 PaperScope 实例，否则绘图会混到同一个上下文里

为什么new Path()没出现在Canvas上

创建 Path 或其他项只是生成了 Paper.js 内部对象，不会自动渲染——必须显式调用 item.addTo(project.activeLayer) 或直接赋值给 project.activeLayer.children。

默认 project.activeLayer 是空的，new Path() 后不添加进 layer，等于“画在空气里”
别依赖构造函数的返回值自动加入场景；new Path({ strokeColor: 'red' }) 本身不触发绘制
如果用了 paper.setup()，project 和 view 都已就绪；但若用 paper.setup({ insert: false }) 禁用自动插入，则更得手动管理 view.draw()
示例：正确写法是 const path = new Path(); path.strokeColor = 'blue'; path.addTo(project.activeLayer);

draw()什么时候必须手动调用

Paper.js 默认开启自动重绘（view.autoUpdate = true），但某些操作会绕过自动触发机制，此时画面卡住、修改不生效。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

批量修改多个 item 属性（如循环设置 item.position）后，建议最后调一次 view.draw()，避免逐次重绘带来的性能抖动
监听原生事件（如 canvas.addEventListener('mousemove', ...)）中更新图形时，Paper.js 不感知，必须手动 view.draw()
使用 view.onFrame 时，框架会自动调用 draw()；但若你禁用了 view.autoUpdate，又没写 onFrame，那所有变更都不可见
注意：频繁调用 view.draw() 不等于“更流畅”，反而可能压垮帧率；优先用 onFrame 做动画

Canvas尺寸变化后图形变形或错位怎么办

Paper.js 的坐标系默认映射到 canvas 的 CSS 尺寸，而非实际像素尺寸。当 canvas 被 CSS 缩放（如 width: 100%; height: auto）、响应式调整或 devicePixelRatio 不为 1 时，图形会模糊、偏移或比例失真。

务必在 paper.setup() 后立刻同步 canvas 的 width 和 height 属性（不是 CSS 样式）：例如 canvas.width = canvas.clientWidth * window.devicePixelRatio;
调用 view.viewSize 重设视口大小，否则 Paper.js 仍按旧尺寸做坐标换算：view.viewSize = new Size(canvas.width, canvas.height);
监听 window.resize 时，不仅要改 canvas DOM 属性，还要调用 view.update() 或重新设置 view.viewSize，否则鼠标坐标与图形位置对不上
不要只靠 CSS 控制 canvas 大小；Paper.js 渲染依赖的是 canvas.width/canvas.height 这两个整数属性