《HTML5 Canvas开发详解》——1.3 文档对象模型(DOM)和Canvas

简介:

本节书摘来自异步社区《HTML5 Canvas开发详解》一书中的第1章,第1.3节,作者: 【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.3 文档对象模型(DOM)和Canvas

文档对象模型代表了在HTML页面上的所有对象。它是语言中立且平台中立的。它允许页面的内容和样式被Web浏览器渲染之后再次更新。可以通过JavaScript访问DOM,从20世纪90年代末以来它已经成为JavaScript、DHTML和CSS开发最重要的一部分。

画布元素本身可以通过DOM,在Web浏览器中经由Canvas 2D上下文访问,但是在Canvas中创建的单个图形元素是不能通过DOM访问的。正如本章前面讲到的,这是因为画布工作在即时模式,它并不保存自己的对象,只是说明在每个单个帧里绘制什么。

第一个例子在HTML5页面上使用DOM定位< canvas >标签,这也可以用JavaScript来操作。在开始使用< canvas >前,首先需要弄懂两个特定的DOM对象:window和document。

window对象是DOM的最高一级,需要对这个对象进行检测来确保开始使用Canvas应用程序之前,已经加载了所有的资源和代码。

document对象包含所有在HTML页面上的HTML标签。需要对这个对象进行检索来找出用JavaScript操纵< canvas >的实例。

目录
打赏
0
0
0
0
1819
分享
相关文章
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画特效代码,很有意思,一团三角形碎片跟随鼠标的移动,不冗长、不笨重,反而有一种很轻盈的感觉,非常不错
73 29
Html5 Canvas绘制圆形仪表盘动画源码
Html5 Canvas绘制圆形仪表盘动画特效是一款基于HTML5 Canvas绘制的圆形百分比仪表盘动画特效。
29 1
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
776 62
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
html5 canvas五彩碎纸屑飘落动画特效
h5 canvas飘落纸片动画是一款实现五彩纸屑飘落的背景动画特效,基于canvas绘制的空中飘落的纸屑片动画特效,适用于网页动态背景效果代码。简单使用,欢迎下载!代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,是一款不错的的特效插件,希望大家喜欢!
75 5
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
127 5
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
52 0
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
HTML5 Canvas制作的粒子十秒倒计时源码
一段基于HTML5 Canvas制作的粒子爆炸,十秒数字倒计时,全屏倒计时动画效果,给人一种非常大气的视觉感
69 0
HTML5 Canvas制作的粒子十秒倒计时源码
Canvas三维变化背景动画HTML源码
Canvas三维变化背景动画HTML源码
55 5