【老脸教你做游戏】从Canvas开始

最新推荐文章于 2025-06-26 09:10:53 发布

老脸叔叔

最新推荐文章于 2025-06-26 09:10:53 发布

阅读量4.1k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： JS游戏开发文章标签： javascript canvas2d h5 游戏

本文链接：https://blog.youkuaiyun.com/weixin_43791446/article/details/84454281

本文不允许任何形式的转载！

阅读提示

本系列文章不适合以下人群阅读，如果你无意点开此文，请对号入座，以免浪费你宝贵的时间。

想要学习利用游戏引擎开发游戏的朋友。本文不会涉及任何第三方游戏引擎。
不具备面向对象编程经验的朋友。本文的语言主要是Javascript(ECMA 2016)，如果你不具备JS编程经验倒也无妨，但没有面向对象程序语言经验就不好办了。
想要直接下载实例代码的朋友。抱歉，我都用嘴说，基本上没有示例代码。

Web浏览器端游戏到底是个什么玩意儿

实际上Web浏览器端游戏主要是利用Html5中的canvas标签作为画布，利用canvas提供的2d和webgl画笔（也就是context，有人叫它上下文）在canvas上进行绘制图形，通过定时刷新以及配合外部的输入来做到动画效果的这么一个过程。也有一些游戏是用css3配合HTML标签来到达游戏目的的。所以，Web浏览器端游戏也叫H5游戏（HTML5）。

这里多句嘴，微信小游戏虽然也是用JS（Javascript，以下统一用JS），但是跟浏览器端是不一样的，微信只是绑定了JS VM（所以说为什么微信小游戏小程序是没有DOM的），再去调用本地接口（应该是，我也是猜的），根据我的测试，比起直接在浏览器上运行效率高不少。我在微信上的小游戏（fps稳定在60）移植到FB上，FB上的在移动端根本就无法玩，fps只有20多，当然这些都是后话了，系列文章以后会讲到。

大概剧透一下这个系列文章，初期只是最基础的canvas 2d介绍讲解，中期讲面向对象的东西多一些，主要如何构建一套library去做游戏，你可以理解成游戏引擎开发，后期会将很多东西转到webgl上。在这过程中如果有可能我会配合视频讲解。

Canvas和Context

Canvas这个标签以前HTML是没有的，更早以前要想在页面上绘制东西的话要用到一个叫svg的标签，我曾经好像还写过，但是就接触了一两天，后来也不知道发展到哪儿去了。最重要的是，在没有HTML5的和HTML5出现的早期，浏览器上的图形这一块儿东西（包括视频），全部被Adobe控制了，是的，我也写过ActionScript代码，而且那个程序至今还在使用。再看看现在Adobe Flash，唏嘘不已。

现在开始，你可以写一个简单的html文件，里面加入一个canvas标签，像这样：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="main" width=400 height=400>
</canvas>
</body>
</html>

在浏览器中你就什么都看不见，因为canvas上没有进行任何绘制操作，空白一片。但是如果我们在html到吗中加入一段js，如下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <body>
        <canvas id="main" width=400 height=400>
        </canvas>
    </body>
    <script>
        let ctx = main.getContext('2d');
        ctx.beginPath();
        ctx.rect(0,0,100,100);
        ctx.closePath();
        ctx.fillStyle = 'black';
        ctx.fill();
    </script>
</html>