整理HTML5的一些新特性与Canvas的常用属性

2020-04-25 07:51:41易采站长站整理

1.HTML5的内容类型

内容类型描述
内嵌向文档中添加其他类型的内容,例如audio、video、canvas和iframe等
在文档和应用的body中使用的元素,例如form、h1和small
标题段落标题,例如h1、h2和hgroup等
交互与用户交互的内容,例如音频和视频的控件、botton和textarea等
元数据通常出现在页面的head中,设置页面其他部分的表现和行为,例如script、style和title等。
短语文本和文本标记元素,例如mark、kdb、sub和sup等
片段用友定义页面片段的元素,例如article、aside和title等

2.HTML5中新的片段类元素

元素名描述
header标记头部区域的内容(用于整个页面或页面中的一块区域)
footer标记脚部区域的内容(用于整个页面或页面中的一块区域)
sectionWeb页面中的一块区域
article独立的文章内容
aside相关内容或者引文
nav导航类辅助内容

3.新querySelector方法
2016129110156970.png (693×164)

提示
selectors API不仅仅只是方便,在遍历DOM的时候,selectors API通常会比以前的子节点搜索API更快。为了实现快速样式表,浏览器对选择器匹配进行了高度优化。

4.Canvas API
4.1Canvas 概述
Canvas本质上是一个位图画布,其上绘制的图形是不可缩放的,不能像SVG图像那样可以被放大缩小。此外,用Canvas绘制出来的对象不属于页面DOM结构或者任何命名空间。
使用canvas编程,首先要获取其上下文(context)。接着在上下文中执行动作,最后将这些动作应用到上下文中。
canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸。左上角坐标为x=0,y-0的点称作原点。
同大多数HTML元素一样,canvas元素也可以通过应用CSS的方式来增加边框,设置内边距、外边距等,而且一些CSS属性还可以被canvas内的元素继承。
4.2 使用HTML5 Canvas API
修正——在绘制系统中的说法是变换——在应用的时候可以被顺序应用、组合或者随意修改。每个绘制操作的结果显示在canvas上之前都要经过修正层去做修正。虽然这么做增加了额外的复杂性,但却为绘制系统添加了更为强大的功能,可能像目前主流图像编辑工具那样支持实时图像处理,所以API中这部分内容的复杂性是必要的。