<canvas canvas-id="myCanvas" class="canvasBox" bindtouchstart="start" bindtouchmove="move"></canvas>
.canvasBox {
width: 100%;
height: calc(100vh - 520rpx);
background-color: #fff;
border-radius: 14rpx;
}
var app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
x: 0, //开始的位置
y: 0,
newx: 0, //移动的位置
newy: 0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this._canvasInit();
},
_canvasInit() {
var ctx = wx.createCanvasContext('myCanvas');
this.ctx = ctx
},
//触摸开始
start(e) {
this._starTimer(10)
let startx = e.changedTouches[0].x;
let starty = e.changedTouches[0].y;
this.setData({
x: startx,
y: starty
})
},
//触摸移动
move(e) {
let movex = e.changedTouches[0].x;
let movey = e.changedTouches[0].y;
this.setData({
newx: movex,
newy: movey
})
this._drawingLine(this.data.x, this.data.y, this.data.newx, this.data.newy)
this.setData({
x: movex,
y: movey
})
},
// 画线方法
_drawingLine(startx, starty, movex, movey) {
this.ctx.beginPath() //开始定义路径
//this.ctx.setLineWidth(10) //设置线条的宽度
this.ctx.strokeStyle = "rgba(255,0,0,1)" //修改边框颜色
//this.ctx.setGlobalAlpha(0.2) //设置全局画笔透明度 范围 0-1,0 表示完全透明,1 表示完全不透明
//文本
//this.ctx.setFontSize(20) //设置字体的字号
// this.ctx.setFillStyle('blue') //设置填充色
//this.ctx.fillText('Hello', 0, 150) //在画布上输出的文本 内容 x y
this.ctx.moveTo(startx, starty) //起始点
this.ctx.lineTo(movex, movey) //连接到的坐标点
this.ctx.stroke() //沿着绘制的坐标点路径绘制直线
this.ctx.draw(true) //将之前在绘图上下文中画到 canvas 中
},
})