整理HTML5的一些新特性与Canvas的常用属性_html5教程技巧
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了整理HTML5的一些新特性与Canvas的常用属性_html5教程技巧，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7129字，纯文字阅读大概需要11分钟。
内容图文
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 | 标记脚部区域的内容（用于整个页面或页面中的一块区域） |
| section | Web页面中的一块区域 |
| article | 独立的文章内容 |
| aside | 相关内容或者引文 |
| nav | 导航类辅助内容 |
3.新querySelector方法
提示
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中这部分内容的复杂性是必要的。
关于可重用代码有一条重要的建议：一般绘制都应从原点（坐标系的0,0点）开始，应用变换（缩放、平移、旋转等），然后不断修改代码直至达到希望的效果。
context路径函数
（1）moveTo(x,y)：不绘制，只是将当前位置移动到新的目的坐标(x,y);
（2）lineTo(x,y)：不仅将当前位置移动到新的目标坐标（x,y），而且在两个坐标之间画一条直线。
（3）closePath()：这个函数的行为同lineTo很像，唯一的差别在于closePaht会将路径的起始坐标自动作为目标坐标。closePath还会通知canvas当前绘制的图形已经闭合或者形成了完全封闭的区域，这对将来的填充和描边都非常有用。
（4）strokeRect()：基于给出的位置和坐标画出矩形的轮廓。
（5）clearRect()：清除矩形区域内所有内容并将它恢复到初始状态，即透明色。
（6）quadraticCurveTo()：函数绘制曲线的起点是当前坐标，带有两组(x,y)边。第二组是指曲线的终点。第一组代表控制点（control point）。所谓的控制点位于曲线的旁边（不是曲线之上），其作用相当于对曲线产生一个拉力。通过调整控制点的位置，就可以改变曲线的曲率。
图片增加了canvas操作的复杂度：必须等到图片完全加载后才能对其进行操作。浏览器通常会在页面脚本执行的同时异步加载图片。如果视图在图片未完全加载之前就将其呈现到canvas上，那么canvas将不会显示任何图片。
渐变是指在颜色集上使用逐步抽样算法，并将结果应用于描边样式和填充样式中。
使用渐变需要三个步骤：
（1）创建渐变对象；
（2）为渐变对象设置颜色，指明过渡方式；
（3）在context上为填充样式或者描边样式设置渐变。
要设置显示哪种颜色，在渐变对象上使用addColorStop函数即可。这个函数允许指定两个参数：颜色和偏移量。颜色参数是指开发人员希望在偏移位置描边或填充时所使用的颜色。偏移量是一个0.0到1.0之间的数值，代表沿着渐变线渐变的距离有多远。
除了线性渐变以外，HTML5 Canvas API 还支持放射性渐变，所谓放射性渐变就是颜色会介于两个指定圆间的锥形区域平滑变化。放射性渐变和线性渐变使用的颜色终止点是一样的。
内容总结
以上是互联网集市为您收集整理的整理HTML5的一些新特性与Canvas的常用属性_html5教程技巧全部内容，希望文章能够帮你解决整理HTML5的一些新特性与Canvas的常用属性_html5教程技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。