《JavaScript高效图形编程(修订版)》——6.10 用画布sprites取代DHTMLsprite

简介: 我们尽量将绘制sprites的细节“隐藏”在DHTMLSprite对象中,使得应用程序可以很容易实现和使用一个不同的sprite系统。现在我们将在演示中使用一个新的CanvasSprite对象,它利用了性能更强的画布元素。

本节书摘来自异步社区《JavaScript高效图形编程(修订版)》一书中的第6章,第6.10节,作者:【美】Raffaele Cecco著,更多章节内容可以访问云栖社区“异步社区”公众号查看

6.10 用画布sprites取代DHTMLsprite

在第2章中,我们开发了DHTML sprite动画系统,并用它创建了各种图形演示。在第5章中,我们用这个系统制作了一个DHTML视频游戏。我们尽量将绘制sprites的细节“隐藏”在DHTMLSprite对象中,使得应用程序可以很容易实现和使用一个不同的sprite系统。现在我们将在演示中使用一个新的CanvasSprite对象,它利用了性能更强的画布元素。

6.10.1 新CanvasSprite对象
CanvasSprite是DHTMLSprite对象的一个直接替换。除了加了一个画布环境参数(ctx)外,params对象的所有参数都和以前一样被传入:

screenshot

警告:
注意我们使用移位运算符(x>>0,y>>0)确保渲染位置为整数。Firefox和Opera浏览器在分数像素位置绘制时性能会有很大影响。这对普通绘图影响不大,但对高速图形应用,将非常影响性能。
6.10.2 其他的代码更改
下面的代码中粗体标注的是让CanvasSprite工作所需做的其他修改。你可以参考第2章中DHTMLSprite的代码进行比较。
screenshot

相关文章
|
3月前
|
JavaScript 数据可视化
基于fabric.js的图片编辑器, 画布背景实现原理
基于vue3 + fabric.js + vite + element-plus + typescript等技术,画布背景原理分析
基于fabric.js的图片编辑器, 画布背景实现原理
|
JavaScript 前端开发
带你读《小创客趣玩micro bit开发板编程》之二:JavaScript Blocks 图形编程
本书从 micro:bit介绍、micro:bit开发方式、Makecode图形化编程和创意编程案例实践4个维度带领大家逐步理解和学习 micro:bit的使用方法。
|
JavaScript 前端开发
JavaScript 编程精解 中文第三版 十七、在画布上绘图
十七、在画布上绘图 原文:Drawing on Canvas 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 部分参考了《JavaScript 编程精解(第 2 版)》 绘图就是欺骗。
1915 0
|
移动开发 JavaScript 前端开发
《JavaScript高效图形编程(修订版)》——导读
JavaScript结合了HTML5 Canvas等特性,给Web开发人员提供了真正可以不用Adobe Flash等插件的方案。而WebGL等特性则为使用JavaScript和浏览器进行图形编程描绘了非常美好的未来。
1412 0
|
Web App开发 JavaScript 前端开发
《JavaScript高效图形编程(修订版)》——6.11 一个图形使用画布的WebSockets聊天应用
HTTP数据携带了大量的头信息。请求一个字节的数据可能会导致发送数百个字节的、额外的、“看不见的”头信息也被发送。头信息通常包含被传送数据的性质,如内容类型、缓存、编码等。
1908 0
|
JavaScript 前端开发
《JavaScript高效图形编程(修订版)》——6.9 画布和递归绘图
下面我们将尝试用更有趣的东西,具体说是用一点三角函数和一点随机元素,来代替简单的递归递减。图6-14显示了递归调用简单的画布画线命令得出的树。递归图形函数的一个显著特点是看起来比较自然,我们可以看到分支的末梢非常精细。
1548 0
|
前端开发 CDN 容器
Particles.js基于Canvas画布创建粒子原子颗粒效果
文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状、旋转、分布、颜色等属性,还可以动态添加粒子,效果非常炫酷,能和鼠标互动吸附或者是躲避鼠标指针。
1393 0
|
JavaScript 前端开发 程序员
《JavaScript高效图形编程(修订版)》——6.6 画布导出器
Adobe的Flash CS5+有一个画布导出器可以将部分Flash导出为JavaScript 画布源代码。这对想兼顾Flash和画布的开发者很有用。然而,由于该解决方案需要购买Flash创作工具,它对仅仅想开发画布的人来说可能不太划算。
1618 0
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
74 0