【微信小程序】使用canvas制作在线画板，清除与保存

参考：微信小程序实现在线画板https://blog.csdn.net/IT_czh/article/details/84623110

wxml

<!--index.wxml-->
<!-- 弹出框 -->
<view class='alert' hidden='{{alertShow}}' bindtap="alertClick">
<!-- catchtap 阻止冒泡事件 --><view class="alert-main" catchtap='qwe'><form bindsubmit='fabuProject'><view class="timu qwe"><view>题目：</view><input type="text" name="name" placeholder='1-6个字（例：中国）'/></view><view class="tishi qwe"><view>提示：</view><input type="text" name="notice" placeholder='1-10个字（例：国家）'/></view><view class='form-btn qwe'><button form-type='submit'>提交</button><button form-type='reset'>重置</button></view></form> </view>
</view>
<!-- 内容主题 -->
<view class="container"><!-- 绘图区域 --><view class="canvas"><canvas hidden='{{!alertShow}}' class="mycanvas bxz-bb w100p" canvas-id="canvas" bindtouchstart="canvasStart" bindtouchmove='canvasMove' bindtouchend='canvasEnd'></canvas></view><!-- 操作面板 --><view class="tool_bar d-f w100p bxz-bb"><!-- <view class="cancel"><image class="icon" src="../../imgs/icon_cancel.png" />上一步</view> --></view><view class="btn" ><button bindtap="clearCanvas" style="background:#1663f0;position:absolute;left:160rpx;bottom:260rpx;border: 1px solid #1663f0;">清</button><button bindtap="saveCanvasImg" style="background:#1663f0;position:absolute;right:160rpx;bottom:260rpx;border: 1px solid #1663f0;">存</button></view> </view>

let app = getApp();
Page({/*** 页面的初始数据*/data: {// 弹框是否显示alertShow: true,// 初始化标题project: '太阳',// 绘图线的粗细linewidth: [2, 3, 4, 5, 6, 7, 8, 9],// 当前默认的粗细currentLinewidth: 0,// 绘图的颜色color: ['#da1c34', '#8a3022', '#ffc3b0', '#ffa300', '#66b502', '#148bfd', '#000', '#9700c2', '#8a8989'],// 当前默认的颜色currentColor: 0,// 判断是否开始绘画isStart: false},// 点击自己出题diy: function () {this.setData({"alertShow": false});},// 点击弹框的灰色区域alertClick: function () {this.setData({"alertShow": true});},// 改变颜色的事件changeColor: function (e) {// 获取点击画笔的编号let colorIndex = e.currentTarget.id;// 修改默认的颜色编号this.setData({cancelChange: false,currentColor: colorIndex});// 设置颜色this.mycanvas.setStrokeStyle(this.data.color[this.data.currentColor]);},// 改变线的粗细changeLineWidth: function (e) {// 获取点击粗细的编号let widthIndex = e.currentTarget.id;// 修改当前的粗细this.setData({ currentLinewidth: widthIndex });// 设置粗细this.mycanvas.setLineWidth(this.data.linewidth[this.data.currentLinewidth]);},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// 获取题目的},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/// 获取标题的函数onShow: function () {let data = this.data;// 创建画板this.mycanvas = wx.createCanvasContext("canvas");// 设置线的样式this.mycanvas.setLineCap("round");this.mycanvas.setLineJoin("round");// 初始化颜色this.mycanvas.setStrokeStyle(data.color[data.currentColor]);// 初始化粗细this.mycanvas.setLineWidth(data.linewidth[data.currentLinewidth]);},// 绘画开始canvasStart: function (e) {// 获取触摸点的x，y位置let x = e.touches[0].x;let y = e.touches[0].y;// 将画笔移动到指定坐标this.mycanvas.moveTo(x, y);},// 绘画进行中canvasMove: function (e) {// 获取移动过程中的x,y位置let x = e.touches[0].x;let y = e.touches[0].y;// 指定移动的位置this.mycanvas.lineTo(x, y);// 开始画线this.mycanvas.stroke();// 将绘画绘制到canvasthis.mycanvas.draw(true);// 绘制完成，将起始点进行移动this.mycanvas.moveTo(x, y);},// 绘画结束canvasEnd: function () {// 判断是否开始绘画this.setData({isStart: true});},// 清除画板clearCanvas: function () {// 清除区域this.mycanvas.clearRect(0, 0, 400, 400);this.mycanvas.draw(true);},saveCanvasImg() {wx.canvasToTempFilePath({//把当前画布指定区域的内容导出生成指定大小的图片canvasId: 'canvas',success(res) {wx.authorize({//向用户发起授权请求scope: 'scope.writePhotosAlbum',//保存相册授权success: () => {wx.saveImageToPhotosAlbum({//保存图片到系统相册filePath: res.tempFilePath,success: () => {wx.showToast({title: '图片保存成功'})}})}})}})},})

wxss

.container {padding: 0 24rpx;background: #eaeaea;
}
.bxz-bb { box-sizing: border-box; }
.d-f { display: flex; }
.d-b { display: block; }
.w100p { width: 96%;margin:0 auto }
.bdrs50p { border-radius: 50%; }
.container {display: flex;flex-direction: column;align-items: center;height: 100vh;padding: 0;box-sizing: border-box;
} .container > .header {justify-content: space-between;padding-top: 40rpx;padding-bottom: 32rpx;font-size: 30rpx;
}.container > .header .left {align-items: center;color: #e22;
}.container .left .icon {width: 44rpx;height: 44rpx;
}.container > .header .right {align-items: center;color: #333;
}.container .right .icon {width: 40rpx;height: 40rpx;padding-left: 18rpx;
}.mycanvas {height: 700rpx;margin-bottom: 22rpx;background: #fff;box-shadow: 0 0 10rpx #ccc;
}
.canvas{height: 700rpx;margin-bottom: 22rpx;width:100%;
}
.tool_bar {justify-content: space-between;padding: 0 12rpx;margin-bottom: 30rpx;font-size: 28rpx;
}.tool_bar .icon {width: 40rpx;height: 40rpx;padding-right: 8rpx;vertical-align: bottom;
}.linewidth_bar .linewidth_demo {border: 5rpx solid transparent;margin: 0 22rpx;
}
.linewidth_bar .linewidth_demo.active { border-color: #fff;box-shadow: 0rpx 0rpx 10rpx orange }
.icon-huabi { font-size: 44rpx; }
.icon-huabi.active { font-size: 64rpx; }
.btn{margin-top:20rpx;
}
.btn button{border:0rpx;border-radius: 10rpx;height:80rpx;line-height: 80rpx;background: orange;color:#fff;
}/* 弹出框 */
.alert{width:100%;height:100vh;background:rgba(0,0,0,0.3);position: fixed;left:0;top:100rpx;z-index:999;
}
.alert-main{width:95%;height:400rpx;position: absolute;left:0;top:20rpx;right:0;margin:auto;background:#fff;
}
.alert-main .qwe{display: flex;height:100rpx;margin:0 auto;margin-top:20rpx;line-height: 100rpx;width:96%;
}.alert-main input{width:500rpx;height:80rpx;background: #fff;margin: 10rpx 0;border:1px solid #7d7d7d;border-radius: 5rpx;
}
.alert-main button{width:200rpx;height:50rpx;text-align: center;line-height: 50rpx;margin-top:25rpx;margin-bottom:25rpx;
}

【微信小程序】使用canvas制作在线画板，清除与保存相关推荐

微信小程序 - DZMDrawingBoard - (Canvas封装的画板、手写签名、生成图片、保存相册...库)
一.简介在微信小程序开发中,有时候需要手写签名生成图片上传服务器.制作一个手绘板.画板并支持保存图片等,然后就封装了一下:DZMDrawingBoard. DZMDrawingBoard 通过 Ca ...
微信小程序使用canvas制作拼图动画
效果如上图制作思路: 1. 制作9个由特殊图形拼成的九宫格,包含灰色模糊和彩色高亮:2.生成小拼图并进行一系列变化实现蓄能弹起的动画效果:3.将生成的拼图拼贴在对应的位置上,产生破碎动画特效准备工 ...
微信小程序-基于canvas画画涂鸦
代码地址如下: http://www.demodashi.com/demo/14461.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序使用swiper制作轮播图留白的解决方法
微信小程序相比网页制作轮播图快捷了很多,直接可以使用swiper标签,但是对于新手来说,也有很多不可避免的坑. 附上轮播图代码 <view class="swp">&l ...
微信小程序：block制作动态商品列表
微信小程序:block制作动态商品列表在制作微信小程序时,我们往往会碰到需要动态生成列表的情况,本文便是以常见的商品列表为例来学习如何利用block制作动态商品列表. 运行截图实现代码 js: P ...
个人怎么制作微信小程序，微信小程序可以免费制作吗？微信小程序制作教程
微信小程序微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应 ...
html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...
微信小程序使用canvas画图并保存到手机相册踩坑总结
接到个项目做微信小程序的,需要将手机中的页面保存到手机相册中,效果图如下首先想到的就是利用canvas画图然后在保存到相册,看起来很简单网上也有很多例子,但都不完整,很多网友分享的都在半吊子工程,只 ...
微信在线客服 php,微信小程序中添加联系在线客服功能
这次给大家带来微信小程序中添加联系在线客服功能,微信小程序中添加联系在线客服功能的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 普通客服按钮添加客服-联系我们 2. 悬浮客服按钮添加,图片自 ...
微信小程序使用 setInterval 制作计时器后台延迟问题
微信小程序使用 setInterval 制作计时器后台延迟问题之前参加2020年微信小程序应用开发大赛的时候写了一个用于校园足球的微信小程序--踢在浙大. 在小程序的设计过程中出现了一个裁判工具的功 ...

【微信小程序】使用canvas制作在线画板，清除与保存

【微信小程序】使用canvas制作在线画板，清除与保存相关推荐

最新文章

热门文章