原文地址：/learning/developers/139.html
板涂鸦,绘画板,签字版,效果源码
场景1、在一些软件系统中，需要用到手写涂鸦的功能，然后可以将涂鸦的结果保存为图片，并可以将“真迹”通过网络发送给对方
场景2、实现微信小程序，小游戏中，需要使用到绘画板,实现在线涂鸦画板小程序源码
场景3、APP端常用的在线填充颜色绘画功能,图画,画画H5在线功能
如何实现绘画板的基础功能？
查看以下小程序案例，绘画板微信小程序简单的涂鸦板，基础功能先实现，后期二次开发
index.js
let ctx;Page({data:{pen:{lineWidth:5,color:"#cc0033"}},onLoad(options) {ctx=wx.createCanvasContext('myCanvas');ctx.setStrokeStyle(this.data.pen.color);ctx.setLineWidth(this.data.pen.lineWidth);ctx.setLineCap('round');ctx.setLineJoin('round');},touchstart(e) {ctx.setStrokeStyle(this.data.pen.color);ctx.setLineWidth(this.data.pen.lineWidth);ctx.moveTo(e.touches[0].x, e.touches[0].y);},touchmove(e) {let x = e.touches[0].x;let y = e.touches[0].y;ctx.lineTo(x, y)ctx.stroke();ctx.draw(true);ctx.moveTo(x,y)},penselect(e) {this.setData({'pen.lineWidth':e.target.dataset.param})},colorselect(e) {this.setData({ 'pen.color': e.target.dataset.param })}})
index.wxml
<view class="container"><view class='canvas-area'><canvas canvas-id='myCanvas' class='myCanvas' disable-scroll='false' bindtouchstart='touchstart' bindtouchmove='touchmove'></canvas></view><view class='canvas-tools'><view class='box box1' bindtap='penselect' data-param="5"></view><view class='box box2' bindtap='penselect' data-param="15"></view><view class='box box3' bindtap='colorselect' data-param="#cc0033"></view><view class='box box4' bindtap='colorselect' data-param="#ff9900"></view><view class='box box5' bindtap='colorselect' data-param="#f8f8f8"></view></view></view>
index.wxss
/**index.wxss**/page{width: 100%;height: 100%;}.container{position: relative;height: 100%;width: 100%;}.canvas-area{width:100%;height: 100%;background-color: #f8f8f8;}.myCanvas{width: 100%;height: 100%;}.canvas-tools{position: fixed;left: 0;bottom: 20rpx;width: 100%;height: 100rpx;display: flex;flex-direction: row;justify-content: space-around;}.box{width: 100rpx;height: 100rpx;border-radius: 50%;background-color: rebeccapurple;}.box1{background-color: #99cccc;background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACOklEQVRYR+2XzXETUQzHpfHsmdBBqABSAXEFkAqACrAPlsYnwsnz5INJBaQDkgoIFThUAB1grvbsiNGOl7HXT++9TcJMDryLD6uPn//Sk3YR7nBE5AoAXlVV9XQ8Hq9E5EZVl8w87hsO+zqIyFsA+Gx+RNT4i4jar6qeMbPBFZ9eALPZ7HgwGCwB4CgGAACrqqqemSqlBL0ATGoAeNkG7yqwVeGKmc8eHCCEMELExW7gGMD2+TsiuiyBKFJARF4AgEm/dxIAq7quT6bT6c8cRBFACOEWEZ/3ADDTGyIa3hsghHCOiB9igRIKNOaqOmbmTymIpALz+fxUVb96AQxgezN+ODbZUrgAi8XiaL1eLxHxOAWQg8yVwgUQEZPuvZP8uq7rUdtkIYTXAHCJiE9i9qlSRAEsICJ+cYJ9Z2a7FXsnVwoAGBLRbdcvCpAKpqofmfk8BufdFrNFxOFkMrFBtnfcEoQQTNI3XYcMQNQHAL4R0WkM2gVIqHBNRFbzg9Md1TsGJzH5G2VSd7RduxGbg4DebVDVaM+0MXMAf1dvB8K2nfVB01Sqak07cv5Mci8kAWwWbDabXymVcs/alxbPLrsLUp2dS55qvqISmJF3GwqSm8kFEXmlaUKUKOAuowKI7HtBFqBg1rsc3vDZdfinAADg3v/iHriPAu37QqpUWQUySybZBg8CYBlMhYKGOzCJLZ+uUckbUfPR0Tm/vdneFzQ3imPJ++Yw+/7b0LzaT667ZOz4/Ad4vAr8AXbVLzCeJobyAAAAAElFTkSuQmCC");background-repeat: no-repeat;background-position: center;}.box2{background-color: #0099cc;background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACQElEQVRYR8WX3Y2cMBSFz92dArYEdxC2guUxikCiBEqYDjAdTAmUgASJ8kgHYTtwCSlgd25k1h4RD/iHKFpeRoIx/s65P74QPvmiT94fhwBkKSpifLHwTHiVg+qPiEkGkJV4ojfMADoQGjBaADWfkMle/U6FSAZoCyH1Js2oZFsKbgZF63v/FcCqt2otgHs/BSLJAVepBdAbHnUhGmBL5RrgqAvxAKWoiSF07K3Fa4CjLkQDtIWY+YR8nekugHWhGZWIzYMoAKnVA3kzqHr9YhfAusAEJQfVxUBEAbSFUPyGXP5UKgSQ6kIQYE/9otb0AVdpW4qOgSnGhSDAnnofgPwqBJ0wxeSCF8Cn3gdgnkW54AXwqZffREaP+MXveJY/lD4b/rpiXdgF8Ma+EBcQBBgzCBkYqhnV+Ugu7AK0pej5HdJVt6Vszynj0qUZVL5Xkj4HKgLqZlDVerEsRE4EuX5pW4qJGVKOanLKtOcrJvldXZIBTCL1DHTusLEovqLS7iwqH9C7Gb8MLcDZp17v4a8CM3y4w4bdlAlMDLIwVuXtYNpoXq4TwT5glNyFwtdml/wJWG/XBwF8odiCiLU+CSD2rE+xPglA/zkmFCnWJwOYUOip967rrUKR8SNEynQclQP2nNe/64norvN9TMxPW13xUB+4ldVHrXfNqDJf9hvQma+ot86HrbVRDizjGHB2O91mFSTABhuRtZ6BlwfCbRgNuXBlnAl49YUrOgnNd2DQeheKCXPM92JUCEKK/+X5H8LfkzA712zDAAAAAElFTkSuQmCC");background-repeat: no-repeat;background-position: center;}.box3{background-color: #cc0033;}.box4{background-color: #ff9900;}.box5{background-color: #cccccc;background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACFUlEQVRYR8WXTVIiMRTH/w+NrPzaWTVgMRuhVwMnEE6ANxBPYHsD5wbcQL0BnsC+ge6amo0UrVUuLadcSAbeVKRFG/ojSWORZXeS3y956ffShBU3WjEfSxX480PUxasc/HzGs+7Ccgvc72BHARV8soYbAIPii2zpSuQSUPC3LXEDpgGImwB+g9EBgXUlrAVmcFD9fbuZvVogW+/PN4WnK2ElsAAPA07Ml9VAnphIGAskwT8OnamEkUAW3EZCW0AXbiqhJWAKN5HQEvDLwiOiQ93k8rVf1pnIFPDL4pKIjm3gn2P4rDaU3elcOCqM0Tx4lHfqfarAcuChBrPKDY2v8FSBpcJnW8F38xkydge+B66SJV85gexEzsh8bPsl0UWBTvPFfHF0HDw2BH5pvUmFgqpqS2tJ8AUBVVLHa9QjcBfAOUDbeS3S4BGBMNncE09OqsG4F9Z3L49EFjwi0N8XLoNcZziqfKw6j4QOPCpQEl0m1J1AqovFrNlI6MIjAv7+xjmB27WhbMzH3UTCBB4RmELolieTlvPwz7ORMIUvfAVhDmgXX0aNuEtl2k7YwOPzwLRg/Eq6VMZJ2MITa0FYtRIl+uWNHghtNUEeuEYxQpsAtzqUV6qzv4cKCXEBYJeZXQId1R6kmydZpZbj2LrAuC7+HXV0fzyy5LIvJHuoQIhpbpDSc54wyJrU5H2mgMlkNn1XLvAfohBhMIKhmNsAAAAASUVORK5CYII=");background-repeat: no-repeat;background-position: center;}
