【⼩程序】使⽤canvas制作在线画板，清除与保存参考：⼩程序实现在线画板
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' bindtouchen  </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" >清</button>
<button bindtap="saveCanvasImg" >存</button>
</view>
</view>
js
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,
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
});
// 设置颜⾊
},
// 改变线的粗细
changeLineWidth: function (e) {
// 获取点击粗细的编号
let widthIndex = e.currentTarget.id;
// 修改当前的粗细
this.setData({ currentLinewidth: widthIndex });
/
/ 设置粗细
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function (options) {
// 获取题⽬的
},
/**
* ⽣命周期函数--监听页⾯初次渲染完成
*/
onReady: function () {
},
/**
* ⽣命周期函数--监听页⾯显⽰
*/
// 获取标题的函数
onShow: function () {
let data = this.data;
// 创建画板
/
/ 设置线的样式
// 初始化颜⾊
// 初始化粗细
},
// 绘画开始
canvasStart: function (e) {
// 获取触摸点的x，y位置
let x = e.touches[0].x;
let y = e.touches[0].y;
// 将画笔移动到指定坐标
},
// 绘画进⾏中
canvasMove: function (e) {
// 获取移动过程中的x,y位置
let x = e.touches[0].x;
let y = e.touches[0].y;
// 指定移动的位置
// 开始画线
// 将绘画绘制到canvas
// 绘制完成，将起始点进⾏移动
},
// 绘画结束
canvasEnd: function () {
// 判断是否开始绘画
this.setData({
isStart: true
});
},
// 清除画板
clearCanvas: function () {
// 清除区域
},
saveCanvasImg() {
wx.canvasToTempFilePath({//把当前画布指定区域的内容导出⽣成指定⼤⼩的图⽚      canvasId: 'canvas',
success(res) {
wx.authorize({//向⽤户发起授权请求
scope: 'scope.writePhotosAlbum',//保存相册授权
success: () => {
wx.saveImageToPhotosAlbum({//保存图⽚到系统相册
filePath: pFilePath,
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;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。