微信小程序_(组件)canvas画布

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

canvas画布效果官方文档：传送门

Page({
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg)
},
onReady: function (e) {
// 使用 wx.createContext 获取绘图上下文 context
var context = wx.createCanvasContext('firstCanvas') //设置画笔的颜色
context.setStrokeStyle("#00ff00")
//设置线宽为5个像素
context.setLineWidth(5)
//左上角坐标(0，0)长宽200
context.rect(0, 0, 200, 200)
//对上面定义动作进行绘制
context.stroke() context.setStrokeStyle("#ff0000") context.setLineWidth(2)
//移动画笔的位置到(160,100)
context.moveTo(160, 100)
//左上角坐标(100，100)，半径为60，起始角度0°，终止角度2π，顺时针绘制
context.arc(100, 100, 60, 0, 2 * Math.PI, false)
context.moveTo(140, 100)
context.arc(100, 100, 40, 0, Math.PI, false)
context.moveTo(85, 80)
context.arc(80, 80, 5, 0, 2 * Math.PI, true)
context.moveTo(125, 80)
context.arc(120, 80, 5, 0, 2 * Math.PI, true)
context.stroke()
context.draw()
}
})

text.js

Gary 微信小程序
<view><canvas style="width: 300px; height: 400px; background:blue;" canvas-id="firstCanvas"></canvas>
</view>

text.wxml

{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}

app.json

实现过程

canvas-id canvas 组件的唯一标识符

同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作

定义画布样式

在JS中添加onReady: function()函数(dom加载完成后执行的函数)

绘制矩形

//设置画笔的颜色
context.setStrokeStyle("#00ff00")
//设置线宽为5个像素
context.setLineWidth(5)
//左上角坐标(0，0)长宽200
context.rect(0, 0, 200, 200)
//对上面定义动作进行绘制
context.stroke()

绘制四个圆

context.setStrokeStyle("#ff0000") context.setLineWidth(2)
//移动画笔的位置到(160,100)
context.moveTo(160, 100)
//坐标原点(100，100)，半径为60，起始角度0°，终止角度2π，顺时针绘制
context.arc(100, 100, 60, 0, 2 * Math.PI, false)
context.moveTo(140, 100)
context.arc(100, 100, 40, 0, Math.PI, false)
context.moveTo(85, 80)
context.arc(80, 80, 5, 0, 2 * Math.PI, true)
context.moveTo(125, 80)
context.arc(120, 80, 5, 0, 2 * Math.PI, true)
context.stroke()
context.draw()

context.arc(100, 100, 60, 0, 2 * Math.PI, false)

第六个参数，当参数为true时画笔顺时针绘制，为false时逆时针绘制

绘制移动的图形效果

Page({
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg)
}, pos:{
x:0,
y:0
}, onReady: function (e) {
this.draw()
}, btnclick:function(){
setInterval(this.draw,10)
}, draw:function(){ this.pos.x++;
this.pos.y++;
// 使用 wx.createContext 获取绘图上下文 context
var context = wx.createCanvasContext('firstCanvas') //左上角坐标(100，100)，半径为60，起始角度0°，终止角度2π，顺时针绘制
context.arc(this.pos.x, this.pos.y, 60, 0, 2 * Math.PI, false) context.stroke()
context.draw()
}
})

test.js

Gary 微信小程序
<view><canvas style="width: 300px; height: 400px; background:blue;" canvas-id="firstCanvas"
bindtouchstart="btnclick"></canvas>
</view>

text.wxml

app.json

实现过程

在text.wxml中绑定手指点击事件bindtouchstart="btnclick"

bindtouchstart 手指触摸动作开始
bindtouchmove 手指触摸后移动
bindtouchend 手指触摸动作结束
bindtouchcancel 手指触摸动作被打断，如来电提醒，弹窗
bindlongtap 手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
binderror 当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'}

手指触碰属性名

初始化图形坐标原点

pos:{
x:0,
y:0
},

当dom加载完成后执行绘画动作draw()

onReady: function (e) {
this.draw()
},

添加draw()绘画动作

draw:function(){ this.pos.x++;
this.pos.y++;
// 使用 wx.createContext 获取绘图上下文 context
var context = wx.createCanvasContext('firstCanvas') //左上角坐标(100，100)，半径为60，起始角度0°，终止角度2π，顺时针绘制
context.arc(this.pos.x, this.pos.y, 60, 0, 2 * Math.PI, false) context.stroke()
context.draw()
}

手指触摸动作后图形坐标每隔10ms进行x++,y++方向移动(设置事件间隔对图形进行重绘制)

btnclick:function(){
setInterval(this.draw,10)
},