Html5游戏开发攻略（Canvas设置篇）

我们要在页面上绘画出游戏场景，必然要有一个画布(canvas)。

那么，我们就来讲讲如何进行画布设置吧~

虾米？你早就会了？canvas.getContext("2d")？

那你就错了，这里学问可大着呢。继续往下看看吧。

首先第一点，我们要了解canvas的分辨率设置。

一般来说，游戏标准的4:3分辨率是800X600、1024X768。16:9的是960X540、1366X768。

假设，我们想要将一个800X600的画布拉伸至1024X768应该怎么做？

难道直接把画布的width和height设置成1024X768吗？这很显然不是拉伸。

其实这里涉及到了一个关键点：硬件缩放。

我们在做一般前端的时候都会使用到css，这里也不例外。

假设我们有这样一个元素：

<canvas id="gameCanvas" width="800" height="600"></canvas>

然后我们再加上这段css：

#gameCanvas{
    width: 1024px;
    height: 768px;
}

如果你在这个画布中绘制了东西的话就会发现，哇塞～真的缩放了耶！

而且这里的缩放是硬件缩放，因此，性能将会十分的高（前提是设备支持硬件加速）。

通过以上方式我们知道了如何进行硬件缩放，若你在此之前已经绑定了鼠标事件会发现，怎么鼠标获取到Ｘ和Ｙ和现在的图形所显示的Ｘ和Ｙ对不上呢？这该怎么办？

这是因为我们绘制的时候设置的大小是800X600而真实显示的是1024X768。在这期间画布中的图形已经按照比例进行了缩放。因此，我们需要手动计算以弥补差值。

伪公式 ：鼠标X * (画布宽度 / css设置宽度) = 鼠标映射到绘制时使用的分辨率的X位置

套入公式，计算(假设当前鼠标在550X300的位置)：550 * (800 / 1024) ≈ 430

因此，计算得出 ，鼠标当前的X位置指向的应该是画布中绘制的430的位置。

鼠标的Y位置同理。

好的~上面我们已经介绍了如何进行硬件缩放且如何获得鼠标指向的位置。

接下来我们就来通过以上两个方法做出同比缩放效果吧！

何为同比缩放？请看图：

通过上图我们可以看出，无论我们如何对浏览器进行缩放，画布宽高比永恒不变。

这就是我们所需要的效果了。下面我们就来实现吧！

第一步：计算原始宽高比，假设我们的画布是800X600的分辨率。那么宽高比就是：800 / 600 ≈ 1.33

第二步：定义一个函数，根据宽高、上层元素宽高计算缩放值。将缩放值与原始宽高进行计算。将元素显示到上层元素中心。

function resize(){
    // 获取画布元素
    var canvas = document.getElementById("gameCanvas");
    // 画布元素的上层元素
    var pe = canvas.parentElement || canvas.parentNode || document.body;

    // 画布元素的上层元素宽度和高度
    var pw = pe.clientWidth;
    var ph = pe.clientHeight;

    // 画布元素的宽度和高度
    var width = canvas.width;
    var height = canvas.height;

    // 缩放值
    var scaling = Math.min(pw / width, ph / height);

    // 设置新宽度和高度
    canvas.style.width = (width * scaling) + "px";
    canvas.style.height = (height * scaling) + "px";

    // 如果当前画布在body中则显示在最中央
    if (pe == document.body){
        canvas.style.marginTop = ((ph - height * scaling) / 2) + "px";
        canvas.style.marginLeft = ((pw - width * scaling) / 2) + "px";
    }
}

// 绑定事件
window.addEventListener("resize", resize, false);
// 强制使用单屏应用方式
if (pe == document.body){
    var ss = document.createElement("style");
    ss.innerHTML = "html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;}";
    document.getElementByTagName("head").item(0).appendChild(ss);
}

这样就可以了！~

最后的同比缩放加上前面的鼠标位置计算就是完美的应用分辨率自适应了！~

这是一个很简单但是却会经常忽略掉的一些处理 。

另外，这个方法在配合使用Fullscreen API的时候会出现一些计算错误，只需要修改上面代码的一小部分就可以搞定，就留作作业吧~！如果真心搞不定，请在评论中留盐~~~~

最后放一个演示结束~请期待下一篇~