Page({
data: {
},
onLoad: function() {
wx.createSelectorQuery()
.select('#canvas')
.fields({
node: true,
})
.exec(this.init.bind(this))
},
init(res) {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
this.drawPath(ctx)
},
drawPath(ctx){
var dwidth = 800 / 80.0;
var pos = Math.ceil(Math.random() * 75) + 30;
for (var i = 0; i < 80; i++) {
ctx.beginPath();
ctx.moveTo((i * dwidth), pos);
var pos2 = Math.ceil(Math.random() * 75) + 30;
ctx.lineTo(((i + 1) * dwidth), pos2);
pos = pos2;
ctx.stroke();
}
ctx.strokeStyle = "green";
for (var i = 10; i < 80; i++) {
ctx.clearRect((i * dwidth), 0, ((i + 1) * dwidth), 150);
ctx.beginPath();
ctx.moveTo((i * dwidth), pos);
var pos2 = Math.ceil(Math.random() * 75) + 30;
ctx.lineTo(((i + 1) * dwidth), pos2);
pos = pos2;
ctx.stroke();
}
}
})
|