您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
效果
canvas画板移动端 .gif
需求
在一些项目业务中，经常会使用到画板，让用户自己去写/画一些东西做标示，比如说在线签电子合约、签名等，如果不用插件，那么如何使用h6的canvas画布来实现这一需求呢？ 【本篇只讨论移动端，PC端请看上篇】
分析
很明显，我们需要一个canvas，关于canvas的一些基本操作可以在w3school或者别的一些平台上熟悉一下，其实本例也是基础操作。本案例在vue中完成。（脱离vue也一样。）
1. canvas画布
随意布局的一个画布，此处值得注意的是如果canvas的宽高确定，则在html>canvas中直接写宽高，如果不确定，根据别的元素变化，那么可以在js中初始化画布时写。
html
<div class="boardBox" ref="boardBox">
<canvas ref="board"
</canvas>
</div>
布局
.boardBox{
margin: 30px auto;
width: 90vw;
height: 25vh;
background: #f9f9f9;
canvas{
border: 1px solid #b3b3b3;
}
}
画布初始化
let board = this.$refs.board; // 获取DOM
board.width = this.$refs.boardBox.offsetWidth; // 设置画布宽
board.height = this.$refs.boardBox.offsetHeight; // 设置画布高
this.ctx = board.getContext('2d'); // 二维绘图
this.ctx.strokeStyle = '#000'; // 颜色
this.ctx.lineWidth = 3; // 线条宽度
2. 逻辑分析
由于本篇只讨论移动端端，因此无非是在画布上监听三个触摸事件：touchstart、touchmove、touchend。
那么，在这三个事件中，分别需要做什么呢？
touchstart
开始滑动按下，需要做：
touchmove
触摸滑动时，又要做那些准备呢？
touchend
滑动结束，事件结束：
好了，其实就是这三个事件，理清楚之后去代码实现就简单得多了。附上代码一份。
3. 代码
CSS略，如初始化即可，不是重点。
<div class="boardBox" ref="boardBox">
<canvas ref="board"
@touchstart="mStart"
@touchmove="mMove"
@touchend="mEnd">
</canvas>
</div>
data() {
return {
ctx: null,
point: {
x: 0,
y: 0
},
moving: false // 是否正在绘制中且移动
};
},
mounted() {
let board = this.$refs.board; // 获取DOM
board.width = this.$refs.boardBox.offsetWidth; // 设置画布宽
board.height = this.$refs.boardBox.offsetHeight; // 设置画布高
this.ctx = board.getContext('2d'); // 二维绘图
this.ctx.strokeStyle = '#000'; // 颜色
this.ctx.lineWidth = 3; // 线条宽度
},
methods: {
// 触摸(开始)
mStart (e) {
console.log(e);
let x = e.touches[0].clientX - e.target.offsetLeft,
y = e.touches[0].clientY - e.target.offsetTop; // 获取触摸点在画板（canvas）的坐标
this.point.x = x;
this.point.y = y;
this.ctx.beginPath();
this.moving = true;
},
// 滑动中...
mMove (e) {
if(this.moving) {
let x = e.touches[0].clientX - e.target.offsetLeft,
y = e.touches[0].clientY - e.target.offsetTop; // 获取触摸点在画板（canvas）的坐标
this.ctx.moveTo(this.point.x, this.point.y); // 把路径移动到画布中的指定点，不创建线条(起始点)
this.ctx.lineTo(x, y); // 添加一个新点，然后创建从该点到画布中最后指定点的线条，不创建线条
this.ctx.stroke(); // 绘制
this.point.x = x, this.point.y = y; // 重置点坐标为上一个坐标
}
},
// 滑动结束
mEnd () {
if(this.moving) {
this.ctx.closePath(); // 停止绘制
this.moving = false; // 关闭绘制开关
}
},
},
思考
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持亿速云。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。