HTML5 中的
1.HTML5的内容类型
类型描述将其他类型的内容嵌入到文档中，例如音频、视频、canvas和iframe等流在文档主体和应用程序中使用的元素，例如表单、h1和小标题段落标题，例如与用户交互的h1、h2和hgroup等内容。音频和视频控件、按钮和文本区等元数据通常出现在页面的头部，设置页面其他部分的性能和行为，如脚本、样式和标题。短语和文本标签元素，如mark、kdb、sub和sup等。用友定义了页面碎片的元素，例如2.HTML5中新的片段类元素元素名称如article、Side、title描述了header标记页眉区(针对整个页面或页面中的一个区域)和footer标记页脚区(针对整个页面或页面中的一个区域)的内容。节网页文章独立文章内容侧相关内容或引用导航导航辅助内容3.新querySelector方法
给个提示
选择器API不仅仅是方便。当遍历DOM时，选择器API通常比以前的子节点搜索API更快。为了实现快速样式表，浏览器对选择器匹配进行了高度优化。
4.画布API
4.1 Canvas画布概述Canvas本质上是一个位图画布，在上面绘制的图形是不可缩放的，不能像SVG图像一样放大缩小。此外，Canvas绘制的对象不属于页面的DOM结构或任何名称空间。
要用canvas编程，首先要得到它的上下文。然后在上下文中执行操作，最后将这些操作应用于上下文。
canvas中的坐标从左上角开始，X轴在水平方向上向右延伸(以像素为单位)，Y轴在垂直方向上向下延伸。左上角x=0，y-0的点称为原点。
与大多数HTML元素一样，canvas元素也可以通过应用CSS来增加边框、设置内边距和外边距，并且canvas中的元素可以继承一些CSS属性。4.2 使用HTML5 Canvas API修订版3354在渲染系统中，据说变换3354可以顺序应用，应用时可以随意组合或修改。每次绘图操作的结果显示在画布上之前，都要经过校正层的校正。虽然这样增加了额外的复杂度，但是给渲染系统增加了更强大的功能，可能会像目前主流的图像编辑工具一样支持实时的图像处理，所以这部分API的复杂度是必要的。
关于可重用代码有一个重要的建议：一般来说，画图要从原点(坐标系中的0，0点)开始，应用变换(缩放、平移、旋转等。)，然后不断修改代码，直到达到想要的效果。
上下文功能
(1)moveTo(x，y):不画，只把当前位置移动到新的目的坐标(x，y)；
(2)lineTo(x，y):不仅将当前位置移动到新的目标坐标(x，y)，而且在两个坐标之间画一条直线。
(3)closePath():这个函数的行为类似于lineTo，唯一的区别是closePath会自动将路径的起始坐标作为目标坐标。ClosePath还会通知canvas，当前绘制的图形已经闭合或者形成了完全闭合的区域，这对以后的填充和描边非常有用。
(4)strokeRect():根据给定的位置和坐标绘制矩形的轮廓。
(5)clearRect():清除矩形区域内的所有内容，恢复到初始状态，即透明色。
(6)quadraticCurveTo():函数绘制的曲线的起点是当前坐标，有两组(x，y)边。第二组是指曲线的终点。第一组代表控制点。所谓控制点位于曲线的旁边(而不是上方)，其作用相当于在曲线上产生一个拉力。通过调整控制点的位置，可以改变曲线的曲率。
图片增加了画布操作的复杂度：必须等到图片完全加载后才能操作。浏览器通常在页面脚本执行时异步加载图片。如果视图在图片完全加载之前将其渲染到canvas，canvas将不会显示任何图片。
渐变是指对颜色集使用逐步采样算法，并将结果应用于描边样式和填充样式。
使用渐变需要三个步骤：
(1)创建渐变对象；
(2)设置渐变对象的颜色并指示过渡模式；
(3)在上下文上设置填充样式或笔画样式的渐变。
要设置显示哪种颜色，只需对渐变对象使用addColorStop函数。该函数允许您指定两个参数：颜色和偏移量。color参数指的是开发人员在描摹或填充偏移位置时想要使用的颜色。偏移量是一个介于0.0和1.0之间的值，表示距离沿渐变线有多远。
除了线性渐变之外，HTML5 Canvas API还支持放射性渐变，即颜色将介于两个指定圆之间的锥形区域的平滑变化。放射性梯度和线性梯度使用相同的颜色终点。
XML/HTML代码将内容复制到剪贴板createaradialgradient(x0，y0，r0，x1，y1，r1)代码。前三个参数表示以(x0，y0)为圆心、r0为半径的圆，后三个参数表示以(x1，y1)为圆心、R1为半径的另一个圆。渐变将出现在两个圆之间的区域。
Scala函数采用两个参数分别表示X和Y维度上的值。每个参数是当画布显示图像时，图像应该在当前轴上向床底放大(或缩小)多少。
要在原点变换图形和路径，执行后统一平移。原因是缩放、旋转等变换操作都是针对原点进行的。
如果旋转不在原点的图形，旋转变换函数将围绕原点旋转图形，而不是原地旋转。
请注意，裁剪后的“阴影”树将首先显示，因此真正的树将以Z轴顺序(画布中对象的重叠顺序)显示在阴影的顶部。此外，CSS的RGBA功能用于填充树木的阴影，通过它我们在正常情况下将透明度值设置为20%。
您可以像操作其他路径对象一样操作画布文本：您可以勾画文本轮廓并填充文本内部；同事，所有可以应用于其他图形的变换和样式都可以用于文本。
上下文对象的文本绘制功能由两个功能组成：
(1)
XML/HTML代码将内容复制到剪贴板fillText(text，x，y，maxwidth)(2)
XML/HTML代码将内容复制到剪贴板strokeText(text，x，y，maxwidth)这两个函数的参数完全相同。必需的参数包括用于指定文本位置的文本参数和坐标参数。Maxwidth是可选参数，用于限制字体大小。它将强制文本字体缩小到指定的大小。此外，还有一个可用的measureText函数，它返回一个measurement对象，该对象包含当前上下文中指定文本的实际显示宽度。
文本渲染相关的上下文属性
阴影
canvas API最有用的特性之一就是允许开发者直接访问canvas底层的像素数据。
(1)
XML/HTML代码将内容复制到剪贴板context.getimagedata (sx，sy，SW，sh)该函数返回当前画布状态，并将其显示为数值。具体来说，返回的对象包括三个属性。
宽度：每行有多少像素。
高度：每列有多少像素。
数据：存储从canvans获得的每个像素的RGBA值的一维数组。这个数组为每个像素保存了——个红色、绿色、蓝色和alpha透明度值。每个值都在0到255之间。因此，画布上的每个像素在该数组中变成四个整数值。数组的填充顺序是从左到右，从上到下。
GetImageData函数有四个参数，这个函数只返回这四个参数定义的区域内的数据。只有画布上由x、y、width和height四个参数框住的矩形区域中的像素才会被提取。
在给定宽度和高度的画布上，坐标(x，y)处的像素组成如下。
红色部分：
XML/HTML代码将内容复制到剪贴板((width*y) x)*4绿色部分：
XML/HTML代码将内容复制到剪贴板((宽度*y) x)*4 1蓝色部分：
XML/HTML代码将内容复制到剪贴板((width*y) x)*4 2透明部分：
XML/HTML代码将内容复制到剪贴板((width*y) x)*4 3(2)
XML/HTML代码将内容复制到剪贴板上下文。Putimagedata (imagedata，dx，dy)该函数允许开发人员输入一组图像数据，其格式与最初从canvas获得的格式相同。
(3)
XML/HTML代码将内容复制到剪贴板context.createImageData(sw，sh)这个函数可以创建一组图像数据，并将其绑定到canvas对象。
如果画布中的图片来自包含它的页面的域，页面脚本将无法获取其中的数据。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。