本节书摘来自异步社区《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相关推荐

  1. 《JavaScript高效图形编程(修订版)》——6.7 画布绘制基础

    本节书摘来自异步社区<JavaScript高效图形编程(修订版)>一书中的第6章,第6.7节,作者:[美]Raffaele Cecco著,更多章节内容可以访问云栖社区"异步社区& ...

  2. 《JavaScript高效图形编程(修订版)》——6.2 位图、矢量图,或两者兼而有之?...

    本节书摘来自异步社区<JavaScript高效图形编程(修订版)>一书中的第6章,第6.2节,作者:[美]Raffaele Cecco著,更多章节内容可以访问云栖社区"异步社区& ...

  3. 《JavaScript高效图形编程(修订版)》——第2章 DHTML基础 2.1创建DHTML sprite

    本节书摘来自异步社区<JavaScript高效图形编程(修订版)>一书中的第2章,第2.1节,作者:[美]Raffaele Cecco著,更多章节内容可以访问云栖社区"异步社区& ...

  4. Android开发——图形编程(一)简单介绍与使用绘图类Paint、Canvas

    Android图形编程基础 文章目录 Android图形编程基础 画笔Paint的 画布Canvas 自定义View的基本实现方法 实例代码 绘图绘图,首先要有的就是颜色Color Android系统 ...

  5. 翻译连载 | 第 10 章:异步的函数式(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇...

    为什么80%的码农都做不了架构师?>>>    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS> ...

  6. JavaScript权威指南--多媒体和图形编程

    知识要点 21.1节介绍如何用传统的JavaScript技术实现诸如图片翻转(鼠标指针移动到一张静态图片上切换成另外一张图片)这样的视觉效果. 21.2节介绍HTML5的<audio>和& ...

  7. 学废了系列 - WebGIS vs WebGL图形编程

    前工作中有不少涉及到地图的项目,我参加了几次技术评审,前端伙伴们在 WebGIS 方面的知识储备稍有不足,这次分享的主要目的是科普一些在前端领域比较常用的 WebGIS 知识.另外,我之前的工作中积攒 ...

  8. 翻译连载 | 第 9 章:递归(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇...

    为什么80%的码农都做不了架构师?>>>    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS> ...

  9. 翻译连载 | JavaScript轻量级函数式编程-第7章: 闭包vs对象 |《你不知道的JS》姊妹篇...

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

最新文章

  1. 详细介绍!Linux 上几种常用的文件传输方式
  2. 以OpenGL/ES视角介绍gfx-hal(Vulkan) Framebuffer接口使用
  3. 文巾解题 1556. 千位分隔数
  4. SharePoint服务器修改域和机器名
  5. LVM原理、创建、扩容、缩减、快照详解
  6. 某大型银行深化系统技术方案之十三:服务层之服务接口模式
  7. 知识分享 | IEC FMEA手册 附录A.1摘录
  8. 函数求和公式计算机出库入库,Excel 库存统计相关函数及制作库存统计表
  9. 达梦数据库远程网页访问
  10. 图解敏捷教练和 ScrumMaster
  11. oracle删除不了同义词,删除同义词,百科如何删除同义词项
  12. tomcat 8.5.31启动报错:org.apache.jasper.servlet.TldScanner.scanJars At least one JAR was scanned for TLD
  13. RiPro主题高级美化包支持最新版(附安装说明)
  14. 开发手札:git日常抽风记录
  15. 加入域时“找不到网络路径”的解决办法
  16. response.text和response.content
  17. input[type=file]如何屏蔽“未选择任何文件”
  18. XAMPP使用本地MySQL
  19. 集合框架·List集合简介
  20. 20个专业H5(HTML5)动画工具推荐

热门文章

  1. Java数据结构与算法:排序算法
  2. usagestatsmanager获取正在运行应用_用Python构建数据科学Web应用程序
  3. 计算机显示器不清楚跟电池有关系吗,电脑液晶显示器显像模糊是什么原因
  4. Python基础之变量学习
  5. python 使用socks 爬虫_小白学 Python 爬虫(17):Requests 基础使用
  6. openstack上传镜像失败_制作云window10镜像
  7. Windows7 apache启动失败的解决方法
  8. 测试用例设计之正交表法详解
  9. Java学习笔记-包装类
  10. 消息队列如何保证顺序性?