当前位置: 首页 > news >正文

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

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

一、如何更新视图

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

二、如何控制样式与填充

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

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

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

http://www.lryc.cn/news/508079.html

相关文章:

  • 【潜意识Java】深度解析黑马项目《苍穹外卖》与蓝桥杯算法的结合问题
  • python报错系列(16)--pyinstaller ????????
  • Pytorch | 从零构建ResNet对CIFAR10进行分类
  • Spring Boot 配置Kafka
  • 基于单片机的火灾报警器 (论文+源码)
  • 分析excel硕士序列数据提示词——包含对特征的筛选,非0值的过滤
  • MongoDB 更新文档
  • 分布式协同 - 分布式事务_TCC解决方案
  • MFC/C++学习系列之简单记录13
  • PostgreSQL表达式的类型
  • 速通Python 第四节——函数
  • 如何在Windows系统上安装和配置Maven
  • STM32之GPIO输出与输出
  • linux定时器操作
  • 重拾设计模式--观察者模式
  • Vue.js前端框架教程7:Vue计算属性和moment.js
  • 【游戏设计原理】22 - 石头剪刀布
  • 3-Gin 渲染 --[Gin 框架入门精讲与实战案例]
  • python小课堂(一)
  • GESP202309 二级【小杨的 X 字矩阵】题解(AC)
  • @PostConstruct注解解释!!!!
  • laya游戏引擎中打包之后图片模糊
  • 【数据结构练习题】链表与LinkedList
  • [项目代码] YOLOv8 遥感航拍飞机和船舶识别 [目标检测]
  • 移动魔百盒中的 OpenWrt作为旁路由 安装Tailscale并配置子网路由实现在外面通过家里的局域网ip访问内网设备
  • JVM对象分配内存如何保证线程安全?
  • ArcGIS计算土地转移矩阵
  • 数据库 MYSQL的概念
  • Node.js后端程序打包问题汇总(webpack、rsbuild、fastify、knex、objection、sqlite3、svg-captcha)
  • 部署 Apache Samza 和 Apache Kafka