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

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 >的实例。

时间: 2024-09-20 04:21:31

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

《HTML5 Canvas开发详解》——1.4 JavaScript和Canvas

1.4 JavaScript和Canvas JavaScript是用来创建Canvas应用程序的一种程序设计语言,能在现有的任何Web浏览器中运行.如果需要重温JavaScript,请关注Douglas Crockford的书<JavaScript: The Good Parts>(O'Reilly),这本书很流行并且有很强的参考价值. 1.4.1 JavaScript框架和库目前有很多流行的JavaScript框架,例如jQuery.Processing.js等,可以帮助开发者提高JavaS

《HTML5 canvas开发详解(第2版)》——导读

前言第2版介绍自从本书第1版发行之后,在过去的两年里,HTML5 Canvas的使用有了突飞猛进的增长.本书的第1版可以称得上是第一批介绍Canvas的专著之一.在我们为自己的快速而感到自豪同时也意味着我们曾经独自进行了大量的研究和探索.早在2011年,只有极少数HTML5 Canvas应用的例子和教程.但在2013年情形发生了改变.现在有许多关于HTML5 Canvas的资源可供选择,从框架到API,有许多网站和书籍进行专门的阐述.为了编写第2版,我们进行了大量艰辛的工作来检查在第1版中哪些部

《HTML5 Canvas开发详解》——导读

https://yqfile.alicdn.com/bc81e95aba389209ecb7176965c56b0ba2d9c780.png" > 前言HTML5 Canvas为开发者提供了一个新的机会,利用它仅使用普通的HTML和JavaScript语言就可以在常见的浏览器中创建动画图形.Canvas是HTML5中使用率最高的一部分,它被用于许多演示与游戏.它提供了视觉效果很棒的交互特性,而且它还提供了非常大的自由度,几乎允许开发者在浏览器窗口中做任何事情.然而它与JavaScript的

《HTML5 canvas开发详解(第2版)》——1.6 HTML5 Canvas版“Hello World!”

1.6 HTML5 Canvas版"Hello World!" 如前所述,将Canvas放入HTML5页面时第一件要做的事就是,看看整个页面是否已经加载,并且开始操作前是否所有HTML元素都已展现.在用Canvas处理图像和声音的时候,这点会非常重要. 为此,这里要使用JavaScript的事件.当定义的事件发生时,事件从对象发出.其他对象监听事件,这样就可以基于事件进行处理.用JavaScript可以监听对象的一些常见事件,包括键盘输入.鼠标移动以及加载结束. 第一个需要监听的事件是

《Web前端开发精品课——HTML5 Canvas开发详解》——第一部分第二章节

第2章 直线图形 2.1 直线图形简介 在Canvas中,基本图形有两种:①直线图形:②曲线图形.Canvas常见的直线图形有三种,分另是直线.矩形.多边形. 这一章我们先来学习Canvas中的直线图形. 2.2 直线 2.2.1 Canvas坐标系 在学习Canvas之前,我们先来介绍一下Canvas中的坐标系是如何使用的.了解Canvas使用的坐标系是学习Canvas的最基本的前提. 我们经常见到的坐标系是数学坐标系,而Canvas使用的坐标系是W3C坐标系,这两种坐标系唯一的区别在于y轴正

《HTML5 Canvas开发详解》——1.5 HTML5 Canvas版“Hello World!”

1.5 HTML5 Canvas版"Hello World!" 如前所述,将Canvas放入HTML5页面时第一件要做的事,就是看看整个页面是否已经加载,并且开始操作前是否所有HTML元素都已展现.用Canvas处理图像和声音的时候这点会非常重要. 为此,这里要使用JavaScript的事件.当定义的事件发生时,事件从对象发出.其他对象监听事件,这样就可以基于事件进行处理.用JavaScript可以监听对象的一些常见事件,包括键盘输入.鼠标移动以及加载结束. 第一个需要监听的事件是wi

《HTML5 Canvas开发详解》——1.9 第二个示例:猜字母

1.9 第二个示例:猜字母 现在来快速看一下另一个广泛提及的 "Hello World!"类型的应用程序示例--"猜字母"游戏.本章通过这个示例来说明用JavaScript编写Canvas程序比用Canvas API多了哪些工作量. 如图1-4所示的游戏当中,玩家要做的是猜出计算机从字母表中随即抽取的字母.游戏会记录玩家已经猜了多少次,列出已经猜过的字母,并且告诉玩家是需要往哪个方向猜(往Z方向猜还是往A方向猜). 1.9.1 游戏如何工作这个游戏的基本结构与&qu

《HTML5 Canvas开发详解》——2.5 高级路径方法

2.5 高级路径方法 接下来深入探讨一下其他绘制路径的方法,包括弧线和曲线,以组合成复杂的图像. 2.5.1 弧线有4种函数可以绘制弧线和曲线.弧线可以是一个整圆,也可以是圆的任何一部分. 1.context.arc() context.arc(x, y, radius, startAngle, endAngle, anticlockwise) x和y定义圆心的位置,radius定义弧线的半径.startAngle和endAngle使用弧度值,而不是角度值.anticlockwise可以是tru

《HTML5 Canvas开发详解》——2.2 基本矩形

2.2 基本矩形 首先从最简单最原始的Canvas内建的几何形状--矩形开始.在Canvas上,绘制基本矩形有3种不同的方式:填充.描边或清除.创建矩形(或者其他形状)还可以使用路径,下一节即将讲到. 实现这3种操作的API函数如下. fillRect(x,y,width,height) 在位置(x, y)处以宽为width.高为height绘制一个填充的矩形. strokeRect(x,y,width,height) 在位置(x, y)处以宽为width.高为height绘制一个矩形边框.它需