微信小程序 Canvas做手持弹幕的一个发现

实现效果：
        




<!--pages/gogogo/gogogo.wxml--> <canvas canvas-id='firstCanvas' style='position:absolute;z-index:25;width:100%;height:100%;'></canvas> <canvas canvas-id='secondCanvas' style='position:absolute;z-index:100;width:100%;height:100%;' bindtouchstart='stopIt' ></canvas>

// pages/gogogo/gogogo.jsvar timer;
Page({
/** * 页面的初始数据 */ data: { pageH : 0, pageW : 0, },
/** * 生命周期函数--监听页面加载 */ onLoad: function (e) { //获取之前页面穿过来的颜色、速度、文字 var rgb = e.rgb; var speed = 61-e.timer; var text = e.name; var _this = this; wx.getSystemInfo({ success: function (res) { _this.setData({ pageH: res.windowHeight, pageW: res.windowWidth, }) } }); //创建背景画布 const ctx = wx.createCanvasContext('firstCanvas'); // Create linear gradient const grd = ctx.createLinearGradient(0, 0, this.data.pageW, 0); ctx.setGlobalAlpha(0.6); grd.addColorStop(0, 'rgb' + rgb + ''); grd.addColorStop(0.3, 'rgb(0,0,0)'); grd.addColorStop(0.7, 'rgb(0,0,0)'); grd.addColorStop(1, 'rgb' + rgb + ''); // Fill with gradient ctx.setFillStyle(grd); ctx.fillRect(0, 0, this.data.pageW, this.data.pageH); ctx.draw(true);
//定义文字移动的坐标 var x_position = 0; var that = this; timer = setInterval(function(){ //secendCanvas 文字的画布 var sec = wx.createCanvasContext('secondCanvas'); //坐标系移动 sec.translate(parseInt(that.data.pageW * 0.6), 0); //逆时针旋转90度 让文字横屏 sec.rotate(-0.5 * Math.PI); //文字宽度 中间横条0.4倍屏幕宽 sec.setFontSize(parseInt(that.data.pageW * 0.3)); //获取文字长度 var txtwidth = sec.measureText(text).width; sec.setFillStyle('rgb' + rgb + ''); sec.save() if (x_position < -txtwidth - that.data.pageH){ x_position = 0; } sec.fillText(text, x_position--, 0); sec.stroke(); sec.draw(); sec.restore(); },speed); },
stopIt: function () { clearInterval(timer); },
/** * 生命周期函数--监听页面卸载 */ onUnload: function () { clearInterval(timer); },
/** * 用户点击右上角分享 */ onShareAppMessage: function () { }})

其中有的一个问题是： 小程序的Canvas在使用setInterval一直刷新时，每一次都要重新创建画布，即

var sec = wx.createCanvasContext('secondCanvas');这一行每一次都要走，不然开发工具上有效果，但真机上没有效果。
从网上看来的原因是，小程序的canvas里的context 与canvas 并不是一对一的。而是context只记录了一些actions操作，并不是指向唯一的canvas。 我们需要在drawCanvas里将上下文与canvas绑定起来。