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()
}
})
Gary 微信小程序 <view><canvas style=" 300px; height: 400px; background:blue;" canvas-id="firstCanvas"></canvas> </view>
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
实现过程
canvas-id canvas 组件的唯一标识符
同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作
定义画布样式
<view><canvas style=" 300px; height: 400px; background:blue;" canvas-id="firstCanvas"></canvas> </view>
在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()
}
})
Gary 微信小程序 <view><canvas style=" 300px; height: 400px; background:blue;" canvas-id="firstCanvas" bindtouchstart="btnclick"></canvas> </view>
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
实现过程
在text.wxml中绑定手指点击事件bindtouchstart="btnclick"
bindtouchstart 手指触摸动作开始
bindtouchmove 手指触摸后移动
bindtouchend 手指触摸动作结束
bindtouchcancel 手指触摸动作被打断，如来电提醒，弹窗
bindlongtap 手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
binderror 当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'}
初始化图形坐标原点
1 pos:{ 2 x:0, 3 y:0 4 },
当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)
},