文章目录前言Canvas 的基本结构代码实现手指轨迹怎么画核心代码清空画布保存签名导出图片完整示例常见误区小白必踩完整可运行示例Canvas 手写签名代码解析写在最后前言想不想自己画个图表、做个涂鸦板、或者实现个手写签名这些都离不开Canvas画布。很多人觉得 Canvas 难其实 2D 绘图就那几个动作拿画笔、落笔、连线、收笔。这篇文章我用一个手写签名板带你入门——手指划过留下轨迹还能一键清空、保存。Canvas 的基本结构HarmonyOS 用Canvas组件 CanvasRenderingContext2D画笔上下文。代码实现Localctx:CanvasRenderingContext2DnewCanvasRenderingContext2D()build(){Canvas(this.ctx).width(100%).height(300).backgroundColor(#FFFFFF).onReady((){this.ctx.strokeStyle#000000// 线颜色this.ctx.lineWidth4// 线粗this.ctx.lineCapround// 线头圆润})}要点Canvas(this.ctx)把画笔上下文传进去后续所有绘制都通过ctx。.onReady(...)画布准备好后再设画笔属性避免空指针。strokeStyle/lineWidth/lineCap笔的颜色、粗细、末端形状。手指轨迹怎么画签名板的核心手指按下记录起点移动时从上一点连一条线到当前点。核心代码LocallastX:number0LocallastY:number0Canvas(this.ctx).onTouch((e){constpe.touches[0]// 第一个触点坐标if(e.typeTouchType.Down){this.lastXp.x;this.lastYp.y}elseif(e.typeTouchType.Move){this.ctx.beginPath()// 新路径this.ctx.moveTo(this.lastX,this.lastY)// 移到上一点this.ctx.lineTo(p.x,p.y)// 连到当前点this.ctx.stroke()// 描边线就画出来了this.lastXp.x;this.lastYp.y// 更新上一点}})逐行讲onTouch拿到触摸事件e.touches[0]是触点坐标相对画布。Down记下起点。Move每次移动beginPath开新路径 →moveTo到旧点 →lineTo到新点 →stroke描出来。一连串短线拼成完整笔迹。关键点必须每帧beginPath()再stroke()否则所有点会连成一条巨长的折线。这是新手必踩的坑。清空画布functionclear(){this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight)}clearRect清掉指定矩形区域传整个画布尺寸就全清了。保存签名导出图片签名要上传得把画布导出成图片。用toDataURL拿到 base64完整示例functionsave():string{returnthis.ctx.toDataURL(image/png)// 返回 base64 图片串}拿到 base64 后可以转文件上传或显示到Image里预览。常见误区小白必踩误区说明每帧不beginPath()不重新开路径所有点会连成一条巨长折线轨迹全乱。onReady之前设画笔画布没准备好就设strokeStyle等会空指针属性都在onReady里设。不clearRect清空想重画前要先清旧内容否则新旧叠在一起。下面这段代码可以直接复制到 DevEco Studio 里运行。建议你边读边敲改一改文末「动手改一改」里的参数亲眼看看效果。完整可运行示例Canvas 手写签名用 Canvas 的onTouch收集轨迹点画出连续线条。代码解析// Canvas 手写签名板EntryComponentstruct SignPad{privatectx?:CanvasRenderingContext2DprivatelastX:number0privatelastY:number0build(){Column({space:12}){Canvas(this.ctxnewCanvasRenderingContext2D()).width(100%).height(200).backgroundColor(#FFFFFF).border({width:1,color:#DDD}).onTouch((e){if(e.typeTouchType.Down){this.lastXe.touches[0].xthis.lastYe.touches[0].y}elseif(e.typeTouchType.Move){constxe.touches[0].xconstye.touches[0].ythis.ctx.lineTo(x,y)// 连到新点this.ctx.stroke()// 描出这一小段this.lastXxthis.lastYy}})Button(清除).onClick((){this.ctx.clearRect(0,0,9999,9999)})}.padding(20)}}你会看到什么手指/鼠标在白色画板上拖动留下连续笔迹点「清除」画板变空白。动手改一改给线条加this.ctx.lineWidth 4调粗细。用this.ctx.strokeStyle #FF0000改成红色签名。把轨迹点存进数组做「撤销上一笔」。写在最后Canvas 绘图就三板斧拿 ctx、beginPath 开路径、moveTo/lineTo/stroke 连线。签名板是绝佳练手项目因为它把触摸→坐标→绘制这条链路完整走了一遍。你把这个签名板跑起来用手指划一划——那种我的操作真的画出来了的反馈感会让你对 Canvas 不再发怵。接下来画柱状图、折线图套路完全一样。