[JavaScript] 我该怎么去写一个canvas游戏

首先你得知道canvas的基础语法,此处不过多赘述.

一、如何更新视图

canvas里面有个clearRect方法,可以遮住画布中一个矩形部分.
但是你想这样做就难免会遮住一些本不该遮住的东西,因为它是一个矩形,并且你还要计算它的位置和尺寸,实时的哦,这蛮费劲的,我以前写过一个降雪效果就用的这种思路,最后做出来了,但是计算压力也很大,效果上经常遮住过多的部分.
后面我想到一个思路,他其实来自于threejs,这个库写的东西每帧都更新屏幕里的所有视图,根据你的数据,全部重画一次.我就想,我能不能只去维护数据,更新视图就只用一个方法,根据当前数据全部重画?canvas的性能挺好的,不用担心画多了卡顿,因为里面进行的毕竟不是DOM操作,而JavaScript又很擅长处理数据.我就直接写了一个用于更新的方法,一个巨大的clearRect,结合setInterval和requestAnimationFrame直接在每次屏幕刷新时覆盖所有,然后根据新的数据重新画一遍.
那种"结合"参考:用setInterval与requestAnimationFrame做节流
效果很好,不用考虑遮挡的问题,维护数据就好了,绘制可以写一些函数,每帧把最新的数据给函数去画.

二、如何控制样式与填充

然后可能还会有一些样式和填充上的问题,可以有两种方法去解决.
第一种,填充和样式都只针对一段路径,写的规整一点,每次beginPath之后closePath,再规定填充,然后你就发现这个填充只影响上面这段路径,样式是不是这样我还没试过.

因为我的代码只用到几个颜色,而初期我又没发现上面这个特性,所以我用了别的方法来控制颜色,也就是第二种方法.

第二种,引入图层的概念(这样也可以做出遮挡效果),就是多个canvas元素,多个上下文,我在不同上下文里使用不同的颜色,至于上下文之间的交互就是数据上的事情了,我们用的那种全部重绘的方法,每次都重绘全部的上下文,在更新前把数据准备好.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值