小游戏离屏 Canvas

前一章节我们实现了小游戏中打飞机的背景动画，我翻看了下小游戏 demo 中的代码，它是每帧移动 2

如果你需要更快的速度，只需要替换 offset++ 改成其它就可以了，比如 offset +=2

当然了，这不是本章节要讨论的重点，大家有没有发现，每次渲染一帧，我们都要重新绘制图片，这样可能导致游戏帧数不高

所以，我们要对背景的动画进行优化，目前 Canvas 提供的所有函数和方法中，唯一能够优化背景的办法就是创建另一个 Canvas ，我们称之为 **离屏 Canvas` ，字面意思，一看就懂

离屏 Canvas

HTML Canvas 其实就是再创建一个 Canvas，先把复杂的绘制动作在这个 Canvas 上绘制，然后在使用 drawImage(canvas) 绘制到 上屏 Canvas

所谓 上屏 Canvas 就是主 Canvas，也就是大家看得到的那个 Canvas

微信小游戏中创建 离屏 Canvas 的方式很简单，仍然是调用 wx.createCanvas

而且它有对 wx.createCanvas() 方法做如下说明

在整个小游戏运行期间，首次调用 wx.createCanvas 接口创建的是一个上屏 Canvas。在这个 canvas 上绘制的内容都将显示在屏幕上。而第二次、第三次等后几次调用 wx.createCanvas 创建的都会是离屏 Canvas。在离屏 Canvas 上绘制的内容仅仅只是绘制到了这个离屏 Canvas 上，并不会显示在屏幕上

为了显示离屏 Canvas 的内容，需要把离屏的 offScreenCanvas 绘制到上屏的 screenCanvas 上

废话不多说，我们开始大刀阔斧的优化吧

game.js

var c = wx.createCanvas();
var ctx = c.getContext('2d');
var img = wx.createImage();

var bgCanvas = null;
var offset = 0;
var w = 0;
var h = 0;
var screenWidth = c.width;
var screenHeight = c.height;

function init_bg() {
    bgCanvas = wx.createCanvas();
    bgCanvas.width = screenWidth;
    bgCanvas.height = screenHeight + h;

    var bgctx = bgCanvas.getContext('2d');

    var y = 0;
    var x = 0;

    // 底部多绘制一张图片
    while (y < screenHeight + h) {
        x = 0;
        while (x < screenWidth) {
            bgctx.drawImage(img, x, y, w, h);
            x += w;
        }
        y += h;
    }
}

function reset() {

    ctx.save();
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, c.width, c.height);
    ctx.restore();
}

function draw_copy() {
    ctx.save();
    ctx.textAlign = "center" // 居中对齐
    ctx.textBaseline = "middle" //垂直居中绘制
    ctx.fillStyle = "#aaa";
    ctx.font = "16px Arial" // 字体大小 16 像素
    ctx.fillText("简单教程，简单编程", c.width / 2, (c.height - 36))
    ctx.fillText(" © 2015-2018 www.twle.cn", c.width / 2, (c.height - 18));
    ctx.restore();
}

function animate_it() {

    reset(ctx);

    ctx.drawImage(bgCanvas, 0, offset, screenWidth, screenHeight, 0, 0, screenWidth, screenHeight);
    draw_copy();

    offset++;
    if (offset % h == 0) {
        offset = 0;
    }

    requestAnimationFrame(animate_it);
}

reset(ctx);

img.onload = function () {
    w = screenWidth > img.width ? img.width : screenWidth;
    h = img.height * (w / img.width);
    init_bg();
    requestAnimationFrame(animate_it);
}
img.src = "images/bg.jpg";

运行演示如下

因为移动距离不是刚好等于图片高度，所以会闪屏

关键的代码在于背景的 canvas 的高度，一定要设置为 screenHeight + h

离屏 Canvas

game.js

微信小游戏 基础教程

微信小游戏基础教程