在微信小程序开发工具新建page页
在wxml文件里设置
<view class=”main”>
<view class=”cvs”>
<canvas id=”mycanvas” type=”2d” bindtouchstart=”paints” bindtouchmove=”paintm” style=”width:{{w}}px;height:{{h}}px”>
</canvas>
</view>
</view>
bindtouchstart=”paints” ， 开始触屏对应函数
bindtouchmove=”paintm” ，在屏幕移动画对应函数
在css文件设置
.main{
display: flex;
flex-direction: column;
align-items: center;
justify-items: center;
}
.cvs{
margin-top:20rpx ;
}
canvas{
border: 1px solid #1f8d10 ;
}
js文件
data里定义变量
data: {
ctx: “”,
w: 300,
h: 150,
},
如图
现在开始在js文件里面写画线函数
先写一个函数取到canvas 绘图上下文
canvasinit: function () {
wx.createSelectorQuery()
.select(‘#mycanvas’)
.fields({
node: true
})
.exec((res) => {
const canvas = res[0].node
const context = canvas.getContext(‘2d’)
this.setData({
ctx: context
})
})
},
.select(‘#mycanvas’) 里面的mycanvas对应wxml文件canvas的id
this.setData({
ctx: context
}) 取到上下文赋值给变量方便使用
这个函数就可以取到画板canvas对应的绘图上下文
写在画板上画线的函数；
//画板开始位置
paints: function (e) {
let x = e.touches[0].x
let y = e.touches[0].y
const ctx = this.data.ctx
ctx.lineCap = “round”
ctx.lineJoin = “round”
ctx.strokeStyle = “#1b76c0”
ctx.lineWidth = 5
ctx.moveTo(x, y)
},
let x = e.touches[0].x
let y = e.touches[0].y ，这个是取到开始触到画板的坐标，
ctx.lineCap = “round”
ctx.lineJoin = “round” ，定义线条和交点样式圆形
ctx.moveTo(x, y) ， 移动到画板坐标处
//画板上移动
paintm: function (e) {
let x = e.touches[0].x
let y = e.touches[0].y
const ctx = this.data.ctx
ctx.lineTo(x, y)
ctx.stroke()
},
let x = e.touches[0].x
let y = e.touches[0].y ，这个是取到在画板移动的坐标，
ctx.lineTo(x, y) ， 画线坐标点
ctx.stroke() ，画线
要把canvasinit函数放到onload里面，页面加载就取到canvas上下文。
如图
当定义宽高为300，150的时候是正常的，当随便改了宽高后比如300，300出现异常，画线位置不对了。
如下
这是物理像素和逻辑像素不相等情况造成。
要在canvasinit函数加添加代码，获取设备的像素比，乘上 canvas 的实际大小，如下
canvasinit: function () {
wx.createSelectorQuery()
.select(‘#mycanvas’)
.fields({
node: true,
size: true
})
.exec((res) => {
const canvas = res[0].node
const context = canvas.getContext(‘2d’)
const renderW = res[0].width
const renderH = res[0].height
const dpr = wx.getWindowInfo().pixelRatio
canvas.width = renderW * dpr
canvas.height = renderH * dpr
context.scale(dpr, dpr)
this.setData({
ctx: context
})
})
},
这样宽高变了画线也正常了。
扩展
在加载页面时根据取到手机设备的宽高，定义
canvas的宽高
在onload函数里面添加
const w=wx.getWindowInfo().screenWidth-40
const h=wx.getWindowInfo().screenHeight-200
this.setData({
w:w,
h:h
})
取到设备宽高，相对于设备，适当减少一点canvas的宽高，这样空白处加入一些按钮选项。如图
