微信小程序 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.js

var 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绑定起来。