更多内容请访问：Harmonyos技术社区https://harmonyos.51cto.com与华为官方共同建立前言随着科技的发展，在日常生活中我们逐渐摆脱笔和纸，但往往有很多场景我们还是需要画画的，不管是开会还是设计等等，正好身边没有笔和纸的时候，我们的画板就派上用场了。我们也可以把它扩展成键盘鼠标等输入设备，还有更多的使用场景让我们一起去探索。功能介绍画板组件是HarmonyOS下基于JavaScriptUI框架开发的组件。其主要特点如下：支持画笔粗细选择支持画笔颜色定义所选画笔颜色除了默认颜色外，还可以点击色轮一键选择你想要的颜色清空画板支持橡皮擦功能支持保存图片功能注意：保存功能需要api>=6，获取的是base64数据，可以根据自己的需要调整功能操作区可以左右滑动选择组件指令//获取图片信息,可以根据自己的图片组件需要处理相应的base64数据getUrl(valueUrl){console.log('获取图片信息'+JSON.stringify(valueUrl));//"data:image/png;base64,xxxxxxxx.."}主代码组件传值//可以传入需要的画笔颜色和画笔大小acco根据你的实际情况props:{//笔刷粗细brushSizes:{type:Array,default:[3,8,16]},//笔刷颜色brushColor:{type:Array,default:['#ffffff',"#000000","#ff9800",'#3f51b5','#ff5722',"#4caf50"]}初始化画布initCanvas(){this.canvas=this.$refs.canvas;this.canvasTxt=this.canvas.getContext('2d',{antialias:true});this.canvasTxt.strokeStyle=this.signColor;this.canvasTxt.lineJoin="round";this.canvasTxt.lineCap="round";this.canvasTxt.globalCompositeOperation=this.penType;this.canvasTxt.lineWidth=this.lineWidth;}设置画板工具setTool(item,index){console.log(index);if(index==0||index==1){this.toolOn=index;}lettype=item.type;switch(type){case1://画笔this.penType='source-over';this.canvasTxt.lineWidth=this.lineWidth;this.canvasTxt.globalCompositeOperation=this.penType;break;case2://橡皮垫this.penType='destination-out';this.canvasTxt.lineWidth=this.lineWidth;this.canvasTxt。globalCompositeOperation=this.penType;break;case3:this.overwrite();break;case4://保存this.savaCanvas();break;}},绘画颜色选择selectColor(color,index){this.colorOn=index;this.signColor=color;this.canvasTxt.fillStyle=this.signColor;this.canvasTxt.strokeStyle=this.signColor;this.canvasTxt.lineWidth=this.lineWidth;},画笔粗细设置selectSize(size,index){this.sizeOn=index;this.lineWidth=size;this.canvasTxt.lineWidth=this.lineWidth;},开始画线drawLine(beginPoint,controlPoint,endPoint){this.canvasTxt.beginPath();this.canvasTxt.moveTo(beginPoint.x,beginPoint.y);this.canvasTxt.quadraticCurveTo(controlPoint.x,controlPoint.y,endPoint.x,endPoint.y);this.canvasTxt。stroke();this.canvasTxt.closePath();}，一键清除功能overwrite(){this.canvasTxt.clearRect(0,0,1920,1920);this.points=[];this.isDraw=false;//画板标记},保存函数savaCanvas(){vardataURL=this.$refs.canvas.toDataURL();//保存画板到base64信息this.$emit('eventDataurl',dataURL)}效果演示要For更多信息请访问：Harmonyos.51cto.com，与华为官方共建的鸿蒙技术社区
