【Golang语言社区】前端编程- 从零开始开发一款H5小游戏(一) 重温canvas的基础用法

初衷

从萌发写一个小游戏的想法到完成游戏开发用了大概一周的业余时间。这个过程积累了一些经验,也算是参透了一些游戏开发的原理。在这里打算写一个系列教程,讲述怎样从零开始开发一款小游戏。让新者少走弯路,快速入手。也能让自己总结反思,发现问题。

在开始介绍如何写游戏前有必要重温一下canvas。它是本游戏的地基,建房子要快,首先地基要牢固。

Canvas

Canvas 对一个做前端的人来说再熟悉不过,html5中新增的这个功能为网页创造了无限可能,极大促进了网页富应用的开发。

而canvas对于大部分前端来说又是陌生的。

可以说在写这个游戏之前,我只是模糊地记得canvas的一些功能,以及经常在网上看到的酷炫高大上的基于canvas实现的效果,但自己绝对答不出canvas有哪些API,以及它们的具体使用方法。毕竟自己平时没做过类似的活动页,在大厂里这些工作一般都是让UED部门给承包了。

好了,废话不多说,进入主题。

在开始之前建议读一遍MDN的教程,如果有《犀牛书》也可以看第21章关于canvas图形编程一节。

里面几个概念需要说一下。

context上下文:

var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d');

我们的图形并不是直接花在canvas上的,而是要通过getContext首先获得这个画板的上下文。传入的2d参数则表示我们创建的是一个2d的画布。后面所有的绘画都是直接操作cxt这个画布对象。

这个画布对象的全称是 CanvasRenderingContext2D,上面实现了很多绘制方法。具体用到可以参考 这里

API虽然多,但是道理只有一个,万变不离其宗。

现实中我们画一个东西一般要有以下几个步骤:

  1. 准备画布
  2. 选择画笔
  3. 选择颜料
  4. 画出轮廓
  5. 填充颜色

而实际上CanvasRenderingContext2D API的设计也是大概遵循这样一个步骤,每一步都会最终影响画出来的图案。

我们可以将所有绘制分为两大类,一类是线,一类是面。线使用的API一般以stroke开头,面的API是以fill开头。

画一条线:

var c=document.getElementById("canvas");
var cxt=c.getContext("2d");                     //准备画布

cxt.lineWidth = 5;                              //选择画笔

cxt.strokeStyle = "red";                        //选择颜料

cxt.moveTo(10,10);                              //...

cxt.lineTo(150,50);                             //...

cxt.lineTo(10,50);                              //画出轮廓

cxt.stroke();                                   //填充颜色

效果图:

画一个三角形面

var c=document.getElementById("canvas");
var cxt=c.getContext("2d");                     //准备画布

cxt.lineWidth = 5;                              //选择画笔

cxt.fillStyle = "red";                          //选择颜料

cxt.moveTo(10,10);                              //...

cxt.lineTo(150,50);                             //...

cxt.lineTo(10,50);                              //画出轮廓

cxt.fill();                                     //填充颜色

效果图:

只要将stroke的地方换成fill, 就变成图形面的填充。而这里的lineWidth其实是可以省略的,它的默认值是1。

为了方便,CanvasRenderingContext2D为我们提供了一些简单的API,不需要使用moveTo和lineTo一条线段一条线段绘制。最重要的有几个:

arc:画圆

cxt.arc(x, y, radius, startAngle, endAngle, anticlockwise);

fillRectstrokeRect:画矩形

cxt.fillRect(x, y, width, height)           //填充图形

cxt.strokeRect(x, y, width, height)         //不填充图形

fillText:写字

cxt.fillText(text, x, y [, maxWidth])

当然CanvasRenderingContext2D还有更多丰富的API,但是基本都是基于上面5个步骤衍生出来的。基础开发中很少会使用到,可以用时再查阅文档。

为了能在一张画图上绘制多个图形而互不影响,CanvasRenderingContext2D提供了 beginPathclosePath

beginPath 用于在开始绘制一个独立图形的时候声明,在beginPath之后定义的画笔,颜料都不会影响到画图中的其他图形。可以看到下面的两条路径,各自定义了strokeStyle, 但是互不影响。

var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");//第一条路径ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.stroke();//第二条路径ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.moveTo(20,20);
ctx.lineTo(120,120);
ctx.stroke();

效果图:

closePath 用于方便地将首尾两个点连接起来,形成一个封闭的图形,而不必手动调用lineTo闭合图形。 例如上方的三角形线段可以这样用:

var c=document.getElementById("canvas");var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.closePath();
cxt.stroke();

效果图:

上面详细介绍的几个简单的API已经足够开发一个简单的游戏了。而如何使游戏界面更丰富炫酷,则需要用到更多的辅助方法。我们将在游戏中用到时再做具体介绍。

原文网址:https://segmentfault.com/a/1190000005892330

原文发布于微信公众号 - Golang语言社区(Golangweb)

原文发表时间:2017-05-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端大白专栏

postcss-loader 有什么用?

19330
来自专栏钱塘大数据

【干货】2017年值得关注的JavaScript框架与主题

导读:JavaScript的繁荣促生了很多优秀的技术、框架与工具库,这空前的繁荣也给很多人造成了困惑,无所适从。到底何者是值得投入,代表了未来的方向,而何者又是...

34960
来自专栏企鹅号快讯

2017年最佳的20款css工具

1.Radiobox ? 小型CSS3动画集合,适用于表现无线电输入内容。 2.SpinThatShit ? 面向单一元素加载器与运行器的SCSS集合。 3.T...

211100
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?

11430
来自专栏闰土大叔

在没有DOM操作的日子里,我是怎么熬过来的(上)

前言 在我动笔写这篇文章的时候,我刚刚从我的项目中删除了最后一行JQuery代码。至于我为何要这么做,请听闰土娓娓道来。前几年我还在想,假如有一天,前端世界里...

398120
来自专栏量子位

用Google Colab,怎样让机器学习图表动起来?

毕竟它无需安装、功能强大、支持实时协作,还能免费蹭Google云上的GPU,比Jupyter Notebooks不知高到哪里去了。

12740
来自专栏腾讯Bugly的专栏

优化安卓应用内存的神秘方法以及背后的原理,一般人我不告诉他

安卓应用一般都害怕自己被杀,内存占用高是被杀的重要原因之一,所以大家都想尽各种招数应对,但效果都一般。 但有一招: WindowManagerGlobal.ge...

89560
来自专栏lonelydawn的前端猿区

h5小游戏——HitRocket

一.游戏介绍 游戏介绍: 不断有携带字母炸弹的火箭撞向地面,请根据火箭身上的字母敲击键盘,每一次对应的敲击会击落携带该字母的火箭并使得分加一,每一架火箭撞到地...

261100
来自专栏陈满iOS

iOS学习资源大集合(转)

vim插件:https://github.com/Valloric/YouCompleteMe

33430
来自专栏互联网杂技

设计师也能轻松掌握的前端小知识

阅读须知: 工具不重要,工具不重要,工具不重要……OK?有人说DW早就淘汰了,我造啊,然后呢?我还打算用小红本(editPlus)讲呢,哈哈哈哈…… 希望乃们接...

35680

扫码关注云+社区

领取腾讯云代金券