《HTML5 Canvas开发详解》——1.2 本书中使用的基础HTML页面

1.2 本书中使用的基础HTML页面

可以使用多个HTML标签来创建HTML页面,在HTML以前的版本中,需明确指示Web浏览器如何渲染HTML页面的标签(例如< font >和< center >)。然而,在过去十年中,浏览器的标准越来越严格,这类标签就被束之高阁了。CSS(层叠样式表)成为定义HTML内容样式的主要方式。因为本书不是关于如何创建HTML页面的(页面中不包含Canvas),因此这里不打算讨论CSS的内部工作原理。

本节将只关注两个最基本的HTML标签:< div >和< canvas >。

1.2.1 < div >
< div >是本书中主要使用的一个HTML标签,用来定位< canvas >在HTML页面的位置。

例1-2使用< div >标签定义“Hello World!”在屏幕上的位置,如图1-2所示。

例1-2 HTML5 Hello World!

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH1EX2: Hello World HTML Page With A DIV </title>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
Hello World!
</div>
</body>
</html>

style="position: absolute; top: 50px; left: 50px;"这段代码是在HTML页面中使用内联CSS的例子。它告诉浏览器呈现内容的绝对位置为距离页面顶端50像素,并且距离页面左端50像素。

1.2.2 < canvas >
利用对< div >进行绝对定位,有助于更好地使用< canvas >。把< canvas >放在< div >内,< div >可以帮读者获取信息,例如当鼠标滑过画布时,可以获取定义指针的相对位置。

时间: 2024-08-31 21:07:46

《HTML5 Canvas开发详解》——1.2 本书中使用的基础HTML页面的相关文章

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

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

《HTML5 canvas开发详解(第2版)》——1.3 本书使用的基础HTML页面

1.3 本书使用的基础HTML页面 可以使用多个HTML标签来创建HTML页面,在HTML以前的版本中,需明确指示Web浏览器如何渲染HTML页面的标签(例如< font >和< center >).然而,在过去10年中,浏览器的标准越来越严格,这类标签就被束之高阁了.CSS(层叠样式表)成为定义HTML内容样式的主要方式.因为本书不是关于如何创建HTML页面的(页面中不包含Canvas),因此这里不打算讨论CSS的内部工作原理. 本节将只关注两个最基本的HTML标签:< d

《HTML5 canvas开发详解(第2版)》——第1章 HTML5 Canvas简介1.1 什么是HTML5

第1章 HTML5 Canvas简介 HTML5是新一代的HTML,即超文本标记语言.HTML从1993年第一次标准化后,便奠定了万维网的基础.HTML通过使用将标签用尖括号(< >)括起来的方式定义Web页面内容. HTML5 Canvas是屏幕上的一个由JavaScript控制的即时模式位图区域.即时模式是指在画布上呈现像素的方式,HTML Canvas通过JavaScript调用Canvas API,在每一帧中完全重绘屏幕上的位图.作为一名程序员,所要做的就是在每一帧渲染之前设置屏幕的显

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

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

《HTML5 Canvas开发详解》——第1章 HTML5 Canvas简介1.1 基础的HTML页面

第1章 HTML5 Canvas简介 HTML5是新一代的HTML,即超文本标记语言.HTML从1993年第一次标准化后,便奠定了万维网的基础.HTML通过使用将标签用尖括号(< >)括起来的方式定义Web页面内容. HTML5 Canvas是屏幕上的一个由JavaScript控制的即时模式位图区域.即时模式是指在画布上呈现像素的方式,HTML Canvas通过JavaScript调用Canvas API,在每一帧完全重绘屏幕上的位图.作为一个程序员,所要做的就是在每一帧渲染之前设置屏幕显示,

《HTML5 canvas开发详解(第2版)》——1.2 基础的HTML5页面

1.2 基础的HTML5页面 在开始讲解Canvas前,需要谈论一下HTML5的相关标准--这里将使用HTML5来创建Web页面. HTML是用于在互联网上构建页面的标准语言.本书不会将很多时间花费在讲解HTML上,但HTML是< canvas >的基础,所以不能完全跳过它. 一个基本的HTML页面分成几个部分,通常有< head >和< body >,新的HTML5规范增加了一些新的部分,例如< nav >.< article >.< h

《HTML5 canvas开发详解(第2版)》——1.11 动画版本的Hello World

1.11 动画版本的Hello World "Hello World"和"猜字母"本身都是不错的示例,但是它们都没能回答出"为什么"--究竟为什么要使用HTML5 Canvas?自创立以来,静态的图像和文字就是HTML的领域,那么画布的不同之处在哪里呢?要回答这个问题,需要创建第二个"Hello World"示例.这个示例将介绍画布与HTML上的其他显示方式的最大不同之处:动画.在这个示例中,将为"Hello Wor

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

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

《HTML5 canvas开发详解(第2版)》——1.9 HTML5 Canvas对象

1.9 HTML5 Canvas对象 Canvas对象是通过在HTML页面的< body >部分中放置< canvas >标签创建的,也可以通过以下代码创建画布实例. var theCanvas = document.createElement("canvas"); Canvas对象有两个相关的属性和方法可以通过JavaScript访问:width和height.这些属性显示当前HTML页面创建的画布的宽度和高度.这里需要强调的是,这两个属性并不是只读的.例如,