在线板涂鸦,微信小程序,绘画板,签字版,实现在线涂鸦画板小程序源码

原文地址：https://www.yii666.com/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;
}

在线板涂鸦,微信小程序,绘画板,签字版,实现在线涂鸦画板小程序源码相关推荐

毕业设计微信小程序在线免费小说系统（源码+论文）
文章目录 0 项目说明 1 系统介绍 1.1 业务层面 1.2 产品层面 1.3 技术层面 2 项目运行 3 项目截图 3.1 小程序 3.2 后台管理系统 3.3 论文概览 4 项目源码 0 项目说 ...
微信小程序：修复图片音频全新升级带特效喝酒神器源码
这是一款全新升级带特效喝酒神器小游戏微信小程序源码小编发现很多喝酒神器小程序都不带特效和音效的感觉差了那么一点意思而且感觉也不炫酷所以小编今天给大家带来一款带特效,音效炫酷的喝酒神器该款神器由 ...
微信小程序仿网易云音乐（使用云开发，提供源码）
微信小程序仿网易云音乐(使用云开发,提供源码)!!!!!!!!!!! 源码: 链接:https://pan.baidu.com/s/1z_ZnRVbT4vjEENimi8yBQQ 提取码:u0o3 一 ...
【微信小程序系列】小程序简单连接后端数据库完整示例（附免费下载的源码）（Servlet）
[微信小程序系列]小程序简单连接后端数据库完整示例(附免费下载的源码)(Servlet) 登录页面 login.wxml <view class="page">< ...
2023微信社区小程序+APP+后台，附带超详细完整搭建教程【源码+教程】
2023微信社区小程序+APP+后台,附带超详细完整搭建教程[源码+教程] 微信授权登陆正常,小程序和APP带后台手机号登陆正常,发帖,建圈子.发活动. 微信小程序是一种轻量级的应用程序,可以在微信 ...
微信公众平台开发教程（四）实例入门：机器人(附源码)
微信公众平台开发教程(四) 实例入门:机器人(附源码) 上一篇文章,写了基本框架,可能很多人会觉得晕头转向,这里提供一个简单的例子来予以说明,希望能帮你解开谜团. 一.功能介绍通过微信公众平台实现在 ...
几何画板手机版_数学几何画板手机版
数学几何画板手机版是一款手机上的几何图形画板服务软件,能够帮助用户在这里随时输入公式和数值,进行计算,并且可以进行几何图形立体化,使用方法简单,能够随时进行旋转拖动,使用方法简单,专为学生用户设计的, ...
【附源码】计算机毕业设计Python安卓少儿英语在线学习平台APPodto4（源码+程序+LW+调试部署）
[附源码]计算机毕业设计Python安卓少儿英语在线学习平台APPodto4(源码+程序+LW+调试部署) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置: Pyth ...
10年大厂程序员是如何高效学习使用redis的丨redis源码分析丨redis存储原理
10年大厂程序员是怎么学习使用redis的 1. redis存储原理分析 2. redis源码学习分享 3. redis跳表和B+树详细对比分析视频讲解如下,点击观看: 10年大厂程序员是如何高效学 ...
帝国CMS仿核弹头H5小游戏模板/92game帝国CMS内核仿游戏网整站源码
帝国CMS仿核弹头H5小游戏模板/92game帝国CMS内核仿游戏网整站源码 ☑️ 编号:ym498 ☑️ 品牌:帝国CMS ☑️ 语言:php ☑️ 大小:360MB ☑️ 类型:仿核弹头H5小游戏 ...

在线板涂鸦,微信小程序,绘画板,签字版,实现在线涂鸦画板小程序源码

板涂鸦,绘画板,签字版,效果源码

如何实现绘画板的基础功能？

在线板涂鸦,微信小程序,绘画板,签字版,实现在线涂鸦画板小程序源码相关推荐

最新文章

热门文章