html5小游戏是用js做的吗,谁说做H5动画和游戏一定要canvas?

2021.05.06-更新了底层,使用起来更加方便,还可以使用oop的继承,增加了一个新demo

/----------------------------------------以下原文内容------------------------------------------/

记得上上个礼拜,我在createjs的技术群里说了本人会封装个用dom的H5引擎,来代替一些大型的H5引擎来做一些简单的动画效果和游戏。现在这个引擎的雏形已经出来了,我取名为animateDOM。

那我为什么要做这个引擎呢?之前我在群里也解释过,其实很多效果可以不需要canvas实现,除了矢量部分,其他的功能dom都可以替代canvas,最重要的是UI可以不用重新写了,而且还可以做出3D特效。

我先来放几个demo。

5cb2d25c39843fc71d31a96c44a4835d.png

其实我这个引擎(其实都算不上引擎就2个文件)很简单,封装了很多过去用起来很麻烦的属性,现在直接可以.xxx就可以用了。大家可以下载下来看一下源码,之后本人还会增加其他功能。

最后,喷我用dom做特效性能差的人,我来给你们上一课。实际上很多引擎本身也不是全部用canvas做的,比如,最著名threejs,也是有用css和dom做动画的部分的。

8708691d4590d50e2f9f9b71d387b114.png

4657d5fab29bc87c3751f9ab3eb27482.png

我这里讲解下用dom的原因,首先,很多小项目你不可能因为一个小特效,引入一整个大引擎,其次有些特效需要和dom叠加的,如果你用canvsa意味着需要通道,canvas如果开启通道,性能并不比css3+dom好,还有,很多UI是不可能去用canvas做的(比如input),但是ui有时候也需要用到一些特效,这时候你怎么办?所以dom做特效是完全可以,而且必要的。

所以呢,这也告诉我们一个故事,请确保自己很了解这个项目的情况下再去喷人,不然容易闹笑话。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/559589.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

单变量和多变量财务预警模型_SPSS数据分析,基于判别分析上市公司财务危机预警分析...

研究概述财务危机(Financial crisis)又称财务困境(Financial distress),是指企业由于营销、决策或不可抗拒因素的影响,使经营循环和财务循环无法正常持续或陷于停滞的状态,具体表现包括持续性亏损、无偿付能力、违约和破产等。研究意义财务危…

先装vs还是先装sql_锅炉给水泵的止回阀到底安装在出口阀前还是阀后?

今天我们来讨论一下锅炉给水泵止回阀安装位置。那么止回阀的安装位置如何确定呢?泵前安装与泵后安装止回阀有何区别,泵前安装适用于哪些地方?止回阀通常要配合其他阀门一起使用,那么跟其他阀门配合使用时,止回阀要安装…

mosek 安装配置python_python安装、配置以及pyinstaller的安装、使用

一、Python下载https://www.python.org/downloads/windows/ 根据自己的需要下载所需的版本二、Python安装可直接点“Install Now”,注意勾选最下面“Add Python 3.6 to PATH”,不然要配置环境。等一会边安装成功,点“close”在开始菜单里打开…

腾讯x5加载本地html乱码,腾讯X5内核播放器遇到的问题

最近在写一个和视频有关的项目,用到了腾讯x5内核的webview。利用webview调用本地js文件来播放视频。事情本身很顺利,但是在过程中遇到了一些小插曲,在此记录一下。1.去除播放器中的广告正常使用的情况下,我们进入播放界面会出现如…

c++创建文件_使用Python实现文件压缩和解压

(点击上方快速关注并设置为星标,一起学Python)来源:网络大家可能都熟悉.zip格式的文件。它可以把多个文件,压缩成一个文件。这在网络上传输时很有用,而且节省硬盘空间。接下来,我们使用Python实现压缩和解压。1、读取Z…

猜拳游戏html,JavaScript中实现猜拳小游戏

页面布局html{font-size: 125%;margin: 0rem;}.wap-main{background: -webkit-linear-gradient(right,#7e2b9a,#ac3e34); /*safari 5.1 to 6.0*/background: -o-linear-gradient(right,#7e2b9a,#ac3e34); /*opera 11.1 to 12.0*/background: -moz-linear-gradient(right,#7e2b9…

thymealf如何实现传单个变量给html_纯前端使用JavaScript发送电子邮件,5个步骤图文教程...

你不需要使用任何后端语言,如 PHP 或 Python。此外,你甚至不需要Node.js!有很多方法可以读取这些数据。你可以将你的表单与数据库(如MySQL)连接,然后从数据库中读取传入的信息。好吧,这是一个选择,但是我认为这对于你的…

rem布局 html,移动端h5之rem布局/px2rem

rem布局之媒体匹配最早的时候用的rem适配方法,通过手动设置媒体查询对不同设备进行设置font-size// 自适应// ------------------------html{font-size: 38px;}media only screen and (min-width: 320px) {html {font-size: 42.666px !important;}}media only scree…

消息已读未读的模型设计_阿里云技术专家分享:现代 IM 系统中消息推送和存储架构的实现...

前言IM 全称是“Instant Messaging”,中文名是即时通讯。在这个高度信息化的移动互联网时代,生活中 IM 类产品已经成为必备品,比较有名的如钉钉、微信、QQ 等以 IM 为核心功能的产品。当然目前微信已经成长为一个生态型产品,但其核…

移动端html5广告的优势,h5手机端开发的优势都有哪些呢

原标题:h5手机端开发的优势都有哪些呢现在是手机不离手的时代,可以说每个人都有一部甚至两部手机来打发日常的空余时间,那么你知道h5手机端开发的优势都有哪些吗?下面原创先锋小编给大家详细介绍下,想要了解的朋友一起来看看吧。…

园林景观cad_自学CAD太难?送你550张练习图纸,七天时间小白蜕变成大神

自学CAD太难?送你550张练习图纸,七天时间小白蜕变成大神俗话说:实践是检验真理的唯一标准。对于想要熟练CAD的朋友来说,最重要的就是练习!大量的练习!CAD画图是个熟能生巧的事情,练多了&#xf…

面条html5,使用 babel 全家桶模块化古老的面条代码

在最近的工作中,接手了一个古老的项目,其中的 JS 代码是一整坨的面条代码,约 3000 行的代码全写在一个文件里,维护起来着实让人头疼。想不通为啥之前维护项目的同学能够忍受这么难以维护的代码……既然现在这个锅被我拿下了&#…

cad批量打印快捷键_批量打印CAD图(无删减版)

前面两期小编出的PDF教程想必用了的人都觉得还不错吧?(此处应有掌声)上一期提到的CAD批量打印今天放出来了,擦亮眼睛往下看很多时候大批量的一堆图纸要输出,比如下面这个当然这批图纸并不多,也只是局部的,通常一个项目…

docker 容器之间通信_四、Docker 网络原理、分类及容器互联配置

本文是《Docker必知必会系列》第四篇,原文发布于个人博客:悟尘纪。上一篇:Docker必知必会系列(三):基于 Docker-registry/Nexus3 搭建本地仓库Docker 网络配置Docker 网络基本原理要实现网络通信&#xff0…

键盘与鼠标器是微型计算机上最常用的,2016年职称计算机考试WindowsXP考前预测试题5...

填空题1.3.5英寸磁盘的滑块小孔打开时,该盘只能(读),不能(写),称为(写保护)。2.软盘上的HD标记表示(双面高密度)。3.常用的双面高密度3.5英寸盘的容量为(1.44MB)。4.硬盘与软盘相比,具有(容量大)、(价格低)的特点。5.常见的光盘驱…

2020idea插件怎么同步_没有用过这些插件,别说你在用vscode

vscode 插件Rainbow Brackets编码过程中,尤其在我们使用js进行函数式编程时,代码里会有很多的花括号,想要保证它们对称十分困难,所以就出现了上面小粉同学的尴尬局面,相信很多人都遇到过类似的情况。Rainbow Brackets&…

python 删除特定行数据_怎么用 Python 做数据分析实例

01 生成数据表第一部分是生成数据表,常见的生成方法有两种,第一种是导入外部数据,第二种是直接写入数据。 Excel 中的文件菜单中提供了获取外部数据的功能,支持数据库和文本文件和页面的多种数据源导入。获取外部数据python 支持从…

html 地址 点击召唤高德,高德地图api 点聚合+海量点+点击事件(根据地区或坐标进行定位)...

javascript区划聚合海量点展现html,body,#container {width: 100%;height: 100%;margin: 0px;}#loadingTip {position: absolute;z-index: 9999;top: 0;left: 0;padding: 3px 10px;background: red;color: #fff;font-size: 14px;}#right {position: absolute;z-index: 9999;top…

python中集合运算_入门 | 一文带你了解Python集合与基本的集合运算

原标题:入门 | 一文带你了解Python集合与基本的集合运算 选自DataCamp 作者:Michael Galarnyk 参与:Geek Ai、思源 一般我们熟悉 Python 中列表、元组及字典等数据结构,但集合可能用得稍微少一点。但集合独特的元素唯一性与 O(1) …

python中文本文件r_Python如何读写文本文件

展开全部 1.open使用open打开文件后一定要记2113得调5261用4102文件对象的close()方法。比如可以用try/finally语句来确保最后1653能关闭文件。 file_object open(thefile.txt) try: all_the_text file_object.read( ) finally: file_object.close( ) 注:不能把op…