整理HTML5的一些新特性和画布的共同属性
对1.html5内容类型内容类型
描述
嵌入的
向文档中添加其他类型的内容，如音频、视频、帆布、和iframe
流
文档和应用程序中使用的元素，如表单、H1和小
标题
段落标题，如H1，H2，和H组，等。
互动
与用户的交互，如音频和视频控件、按钮和文本，等等。
元数据
通常在页面的头部，页面的其他部分的性能和行为，如脚本、样式和标题都设置好了。
短语
文本和文本标记元素，如马克，KDB，子，和支持，等等。
片段
用户定义页面片段的元素，如文章、旁白和标题等。
在2.html5新片段类元素
元素名称
描述
头
标记头部区域的内容（页面中的整个页面或页面）
页脚
标记脚区域的内容（对于整个页面或页面的一部分）
部分
网页中的区域
第
独立的文章内容
一边
相关内容或引文
资产净值
导航类辅助内容
三.新的queryselector方法
提示
选择器API不仅仅是一种便利。当DOM走过，选择器API通常的速度比以前的子节点搜索API。为了实现快速样式，浏览器优化选择器匹配。
4、画布API
4.1canvas概述
画布基本上是一个位图画布，其上的图形不是缩放的，不能像SVG图像那样放大和缩小。此外，用画布绘制的对象不属于页面的DOM结构或任何名称空间。
使用画布编程，首先获取它的上下文（上下文），然后在上下文中执行操作，然后将这些操作应用到上下文中。
从左上角开始画布的坐标，和X轴延伸在水平方向（像素）的权利，而y轴在垂直方向延伸。左上角的坐标为x = 0，对y-0点称为原点。
与大多数HTML元素一样，画布也可以通过设置CSS、设置内部边界和外部边界来添加边框，并且一些CSS属性也可以由画布中的元素继承。
4.2使用HTML5画布API
修改mdash；mdash；在绘图系统中，争论的焦点在于变换mdash；mdash；在应用上，它可以被应用，组合或随机修改。每个绘制操作的结果显示在画布上通过修正层纠正。虽然这增加了额外的复杂性，它的渲染系统增加了更多的强大的功能。它可以支持实时图像处理作为主流的图像编辑工具。因此，API的这一部分的复杂性是必要的。
有关于可重用代码的一个重要建议：总图应该从原点开始（坐标0,0点），应用变换（缩放，平移，旋转，等等），然后修改代码之前持续取得了预期的效果。
上下文路径功能
（1）移动到（x，y）：没有图纸，只是移动的当前位置到目的地的坐标（X，Y新）；
（2）线（X，Y）：不仅将当前位置到新的目标坐标（x，y），也画一条直线的两坐标之间。
（3）closepath（）：这个函数的行为是线非常相似，唯一不同的是，closepaht将自动使用路径的起始坐标为目标coordinates.closepath通知画布当前绘制的图形已经形成一个完全封闭的或封闭的区域，未来的填充和中风是非常有用的。
（4）strokerect（）：绘制基于位置的矩形轮廓坐标。
（5）clearRect（）：在矩形清除所有内容和恢复它的初始状态，即透明色。
（6）quadraticcurveto（）的功能：绘制曲线的起点是当前坐标，两组（x，y）的边缘。第二组指曲线的结束。代表性的控制点（控制点）第一集。所谓控制点旁边的曲线（不是上面的曲线），其功能相当于生产曲线上的张力，通过调整控制点的位置，曲线的曲率是可以改变的。
该图像增加了画布操作的复杂性：有必要等到图片完全加载到它上操作时。浏览器通常在页面脚本执行时异步加载图片。如果在图片未完全加载之前向画布显示视图，则画布将不显示任何图片。
是指利用梯度采样算法在颜色中逐步设置，然后应用到笔画样式和填充样式中。
循序渐进需要三个步骤：
（1）创造渐变的对象；
（2）为渐变对象设置颜色并指出过渡模式。
（3）在填充样式或笔触样式的上下文中设置渐变。
建立颜色显示，在渐变对象使用addcolorstop功能。该功能允许两指定参数：颜色和偏移。颜色参数指的是开发商希望在中风的偏移位置或使用填充颜色。偏移值0到1，有多远沿渐变线的梯度的梯度之间的距离。
除了线性梯度，HTML5画布API也支持放射性渐变。所谓放射性梯度是指在两个指定的圆之间的圆锥区域内颜色会发生平滑变化，放射性梯度的颜色终止点和线性梯度是相同的。
xml代码将内容复制到剪贴板。
CreateRadialGradient（x0，y0，R0，X1，Y1，R1）
在代码中，前三个参数代表一个中心（x0，y0）和圆的半径R0，然后三个参数代表中心（X1，Y1），R1为半径的圆。梯度出现在两圈中间。
Scala函数有两个参数，分别表示x和y中的两个维度的值，画布显示图像中的每一个参数，以图像上的轴的方向向床面放大（或减少）。
的图形和路径的变换操作应在原点，然后翻译应该统一后执行。原因是变换操作，如缩放和旋转，都是针对的起源。
如果一个不在原点的图被旋转，旋转变换函数围绕原点旋转图形，而不是旋转它。
请注意，量身定制的影子树将首先显示，使真正的树将出现在Z轴次序的影子（物体在画布的重叠顺序）。此外，使用CSS的RGBA特性的填料，透明的特性，我们将设置值20%在正常条件下。
操作画布文本的方式与其他路径对象的操作方式相同：它可以描绘文本大纲并填充文本；同事，所有可以应用于其他图形的转换和样式都可用于文本。
上下文对象的文本呈现功能由两个函数组成：
（1）
xml代码将内容复制到剪贴板。
filltext（文本，X，Y，maxwidth）
（2）
xml代码将内容复制到剪贴板。
stroketext（文本，X，Y，maxwidth）
该函数的两个参数是所需参数包括文字和坐标参数用于指定文本的位置参数相同，最大是一种用于限制字体大小可选参数，使文本的字体被迫指定大小。此外，还有一个measuretext函数可以使用。此函数将返回一个度量对象，该对象包含当前上下文环境中指定文本的实际显示宽度。
文本显示相关的上下文属性。
阴影属性
画布API最有用的特性之一是允许开发人员直接访问画布的底层像素数据。
（1）
xml代码将内容复制到剪贴板。
context.getimagedata（SX，SY，SW，SH）
这个函数返回当前画布状态并以数值方式显示它。具体来说，返回的对象包括三个属性。
宽度：每行多少像素。
高度：每个列中有多少像素。
数据：一个一维数组，也从canvans得到每个像素的RGBA值。数组保存四值为每个像素mdash；mdash；红，绿，蓝，和Alpha透明度。每个值是0和255之间。因此，在画布上的每一个像素成为这四的整数数组值。数组的填充的顺序是从左到右，从上到下。
的getimagedata函数有四个参数，它只返回数据由四个参数定义的范围之内。只有在X，Y，宽度四个参数固定的矩形区域的像素的画布，高了。
在宽度和高度给定的画布上，坐标（x，y）上的像素如下所构成。
红色部分：
xml代码将内容复制到剪贴板。
（宽度×y）x）* 4
绿色的部分：
xml代码将内容复制到剪贴板。
（宽* Y）x）* 4 + 1
蓝色的部分：
xml代码将内容复制到剪贴板。
（宽* Y）x）* 4 + 2
透明的部分：
xml代码将内容复制到剪贴板。
（宽* Y）x）* 4 + 3
（2）
xml代码将内容复制到剪贴板。
context.putimagedata（图像、DX、Dy）
此函数允许开发人员传递一组图像数据，这与最初从画布获得的格式相同。
（3）
xml代码将内容复制到剪贴板。
context.createimagedata（SW，SH）
这个函数可以创建一组图像数据并绑定到画布对象。
如果画布中的图片来自页面包含的域，则页面脚本将无法获得数据。