《JavaScript高效图形编程(修订版)》——6.10 用画布sprites取代DHTMLsprite
本节书摘来自异步社区《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对象的所有参数都和以前一样被传入:
警告:
注意我们使用移位运算符(x>>0,y>>0)确保渲染位置为整数。Firefox和Opera浏览器在分数像素位置绘制时性能会有很大影响。这对普通绘图影响不大,但对高速图形应用,将非常影响性能。
6.10.2 其他的代码更改
下面的代码中粗体标注的是让CanvasSprite工作所需做的其他修改。你可以参考第2章中DHTMLSprite的代码进行比较。
《JavaScript高效图形编程(修订版)》——6.10 用画布sprites取代DHTMLsprite相关推荐
- 《JavaScript高效图形编程(修订版)》——6.7 画布绘制基础
本节书摘来自异步社区<JavaScript高效图形编程(修订版)>一书中的第6章,第6.7节,作者:[美]Raffaele Cecco著,更多章节内容可以访问云栖社区"异步社区& ...
- 《JavaScript高效图形编程(修订版)》——6.2 位图、矢量图,或两者兼而有之?...
本节书摘来自异步社区<JavaScript高效图形编程(修订版)>一书中的第6章,第6.2节,作者:[美]Raffaele Cecco著,更多章节内容可以访问云栖社区"异步社区& ...
- 《JavaScript高效图形编程(修订版)》——第2章 DHTML基础 2.1创建DHTML sprite
本节书摘来自异步社区<JavaScript高效图形编程(修订版)>一书中的第2章,第2.1节,作者:[美]Raffaele Cecco著,更多章节内容可以访问云栖社区"异步社区& ...
- Android开发——图形编程(一)简单介绍与使用绘图类Paint、Canvas
Android图形编程基础 文章目录 Android图形编程基础 画笔Paint的 画布Canvas 自定义View的基本实现方法 实例代码 绘图绘图,首先要有的就是颜色Color Android系统 ...
- 翻译连载 | 第 10 章:异步的函数式(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇...
为什么80%的码农都做不了架构师?>>> 原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS> ...
- JavaScript权威指南--多媒体和图形编程
知识要点 21.1节介绍如何用传统的JavaScript技术实现诸如图片翻转(鼠标指针移动到一张静态图片上切换成另外一张图片)这样的视觉效果. 21.2节介绍HTML5的<audio>和& ...
- 学废了系列 - WebGIS vs WebGL图形编程
前工作中有不少涉及到地图的项目,我参加了几次技术评审,前端伙伴们在 WebGIS 方面的知识储备稍有不足,这次分享的主要目的是科普一些在前端领域比较常用的 WebGIS 知识.另外,我之前的工作中积攒 ...
- 翻译连载 | 第 9 章:递归(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇...
为什么80%的码农都做不了架构师?>>> 原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS> ...
- 翻译连载 | JavaScript轻量级函数式编程-第7章: 闭包vs对象 |《你不知道的JS》姊妹篇...
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
最新文章
- 详细介绍!Linux 上几种常用的文件传输方式
- 以OpenGL/ES视角介绍gfx-hal(Vulkan) Framebuffer接口使用
- 文巾解题 1556. 千位分隔数
- SharePoint服务器修改域和机器名
- LVM原理、创建、扩容、缩减、快照详解
- 某大型银行深化系统技术方案之十三:服务层之服务接口模式
- 知识分享 | IEC FMEA手册 附录A.1摘录
- 函数求和公式计算机出库入库,Excel 库存统计相关函数及制作库存统计表
- 达梦数据库远程网页访问
- 图解敏捷教练和 ScrumMaster
- oracle删除不了同义词,删除同义词,百科如何删除同义词项
- tomcat 8.5.31启动报错:org.apache.jasper.servlet.TldScanner.scanJars At least one JAR was scanned for TLD
- RiPro主题高级美化包支持最新版(附安装说明)
- 开发手札:git日常抽风记录
- 加入域时“找不到网络路径”的解决办法
- response.text和response.content
- input[type=file]如何屏蔽“未选择任何文件”
- XAMPP使用本地MySQL
- 集合框架·List集合简介
- 20个专业H5(HTML5)动画工具推荐