支持鼠标、手指与压感触控笔;笔迹只存在当前页面内存里。
这是一个纯前端、单页面的自由画板:绘制、撤销、导出全部由浏览器里的 HTML5 Canvas 2D 完成,页面没有任何后端接口,不引入登录、存档或同步,也不在运行时从 CDN 加载任何绘图库。你画下的每一笔都只在当前页面的内存里,刷新即消失,需要留档就用「导出 PNG」把它存到本地。
六种笔触的差别不在粗细和透明度,而在笔迹算法本身:粉笔模拟老师写板书——粉笔杆宽度基本固定,只因转动与端面磨损缓慢起伏,笔迹由沿运笔方向的短条痕铺成,中心密实、边缘毛糙并往外掉粉尘,写快了条痕大面积跳掉露出板面,就是板书里的飞白;铅笔是细硬的笔芯加窄带内的石墨颗粒,边缘清晰;毛笔按运笔速度与压感大幅改变线宽,带起笔收笔的尖锋和墨色浓淡;钢笔线宽基本恒定、边缘锐利、末端有轻微洇墨;圆珠笔细而硬,带随机断墨;水彩笔宽而半透明,叠涂时会一层层加深。颜色是四色笔记的四种品牌色:红 #FF5555、蓝 #005CFF、绿 #01BD33、黄 #FFCD1C,外加一个随背景反转的黑白色:白板、田字格、米字格上是黑笔,切到黑板自动变成白粉笔。
画布分三层渲染:底层是背景(白板、黑板、田字格、米字格),中层是已提交的笔画,上层是当前这一笔。背景与笔迹数据完全分离,切换背景不改笔迹。橡皮擦用 destination-out 合成模式真正擦除像素、露出下面的背景层,而不是用背景色画一条粗线。输入统一走 Pointer Events 并配合指针捕获与 touch-action: none,鼠标、手指、触控笔走同一条路径;浏览器支持时会取回 getCoalescedEvents 的合并采样点,快速连续绘制不会断线或跳点。除自由绘制与橡皮擦外,还提供直线、箭头、矩形、椭圆与文本工具,以及撤销、重做、一键清空。
为的是让你专心画:选好笔触、颜色和粗细之后点「收起工具栏」,工具选择区就收起来,只留下撤销、重做、清空与导出 PNG,省下的高度直接交给画布,左侧那枚小胶囊仍然显示当前的笔触、颜色与粗细。需要更大的地方就点状态栏的「全屏沉浸」,画板铺满整个屏幕,按 Esc 退出。两种模式都只是改变画布尺寸,已画的笔迹会按新尺寸原样重绘,一笔不少。
区别不在粗细和透明度,而在笔迹算法本身:粉笔是宽而松散的粉尘颗粒;铅笔是细硬的笔芯加窄带石墨颗粒;毛笔按运笔速度与压感大幅改变线宽并有起收笔尖锋与墨色浓淡;钢笔线宽基本恒定、边缘锐利并有轻微洇墨;圆珠笔细而硬、带随机断墨;水彩笔宽而半透明,多次叠加会越叠越深。切换笔触后画同一条线,六种结果肉眼可辨。
不会。绘制、撤销、导出全部在当前页面的内存里用 HTML5 Canvas 完成,页面没有任何后端接口,也不写 localStorage、IndexedDB 或 Cookie。刷新或关闭页面后笔迹、撤销栈、重做栈一起消失且无法恢复。需要留档请点「导出 PNG」,这是唯一的主动保留入口。
不会。背景画在独立的底层画布上,笔迹画在它上面的图层里,两者数据完全分离。从白板切到黑板、田字格或米字格,只是换掉底层那张画布,已画的笔迹一笔不少地保留在原处,撤销与重做也不受背景切换影响。
第五色是「随背景反转」的黑白色:白板、田字格、米字格上是黑笔,切到黑板就自动变成白粉笔,正是老师在黑板上写字的效果。颜色只在下笔那一刻定下来并写进笔画数据,所以之后切换背景不会改动已经画好的笔迹。
可以。点「收起工具栏」后只留下撤销、重做、清空与导出 PNG 四个按钮,省下的高度直接给画布,左侧那枚小胶囊仍会显示当前笔触、颜色与粗细。点顶部栏右侧的「全屏沉浸」画板会铺满整个屏幕,按 Esc 退出。两种模式都只是改变画布尺寸,已画的笔迹会按新尺寸原样重绘,一笔不少。
是真的擦掉。橡皮擦用 destination-out 合成模式把经过区域的像素改成透明,露出下面的背景层,而不是用背景色画一条粗线。所以在黑板、田字格这类有纹理的背景上擦过之后,底纹会原样露出来;擦掉的部分也能被撤销恢复。
包含。导出时新建一张离屏画布,按当前背景(含田字格、米字格的格线)与全部可见笔迹逐层合成,再编码成 PNG 由浏览器下载到本地。导出按当前画布的像素尺寸输出,在高分屏上会带上 devicePixelRatio 的倍率,图片更清晰。整个过程在本地完成,不产生任何网络请求。
支持。输入统一走 Pointer Events,鼠标、手指和触控笔走同一条代码路径,并配合指针捕获与 touch-action: none,避免手机上画画时页面跟着滚动。触控笔的真实压感会直接写进笔画数据,鼠标和手指没有压力数据时按运笔速度模拟线宽变化。浏览器支持 getCoalescedEvents 时还会取回一帧内的多个采样点,快速连续绘制不会断线或跳点。用触控笔时可以放心把手掌压在屏幕上:笔尖一旦开始书写,同一时刻的其他触摸不会参与绘制,笔画也不会被蹭断(手掌拒识)。