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


Posted in HTML / CSS onJanuary 29, 2016

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方法
整理HTML5的一些新特性与Canvas的常用属性

提示
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 还支持放射性渐变,所谓放射性渐变就是颜色会介于两个指定圆间的锥形区域平滑变化。放射性渐变和线性渐变使用的颜色终止点是一样的。

XML/HTML Code复制内容到剪贴板
  1. createRadialGradient(x0,y0,r0,x1,y1,r1)  

代码中,前三个参数代表以(x0,y0)为圆心,r0为半径的圆,后三个参数代表以(x1,y1)为圆心,r1为半径的另一个圆。渐变会在两个圆中间的区域出现。
scala函数带有两个参数来分别代表在x、y两个维度的值。每个参数在canvas显示图像的时候,向其床底在本方向轴上图像要放大(或者缩小)的量。
要在原点执行图形和路径的变换操作,执行完后再统一平移。理由就是缩放(scale)和旋转(rotate)等变换操作都是针对原点进行的。
如果对一个不在原点的图形进行旋转变换,那么rotate变换函数会将图形绕着原点旋转而不是在原地旋转。
注意,剪裁过的“阴影”树会先被显示出来,这样一来,真正的树就会按照Z轴顺序(canvas中对象的重叠顺序)显示在阴影的上面。此外,树影的填充用到了CSS的RGBA特性,通过特性我们将透明度值设置为正常情况下的20%。
操作canvas文本的方式与操作其他路径对象的方式相同:可以描绘文本轮廓和填充文本内部;同事,所有能够应用于其他图形的变换和样式都能用于文本。
context对象的文本绘制功能由两个函数组成:
(1)

XML/HTML Code复制内容到剪贴板
  1. fillText(text,x,y,maxwidth)  

(2)

XML/HTML Code复制内容到剪贴板
  1. strokeText(text,x,y,maxwidth)  

两个函数的参数完全相同,必选参数包括文本参数以及用于指定文本位置的坐标参数。maxwidth是可选参数,用于限制字体大小,它会将文本字体强制收缩到指定尺寸。此外,还有一个measureText函数可供使用,该函数会返回一个度量对象,其中包含了在当前context环境下指定文本的实际显示宽度。
文本呈现相关的context属性
整理HTML5的一些新特性与Canvas的常用属性

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

Canvas API最有用的特性之一是允许开发人员直接访问canvas底层的像素数据。
(1)

XML/HTML Code复制内容到剪贴板
  1. context.getImageData(sx,sy,sw,sh)   

这个函数返回当前canvas状态并以数值数值的方式显示。具体来说,返回的对象包括三个属性。
width:每行有多少个像素。
height:每列有多少个像素。
data:一维数组,存有从canvans获取的每个像素的RGBA值。该数组为每个像素保存四个值——红、绿、蓝和alpha透明度。每个值都在0到255之间。因此,canvas上的每个像素在这个数组中就变成了四个整数值。数组的填充顺序是从左到右,从上到下。
getImageData函数有四个参数,该函数只返回这四个参数所限定的区域内的数据。只有被x、y、width、height四个参数框定的矩形区域内的canvas上的像素才会被取到。
在给定了width和height的canvas上,在坐标(x,y)上的像素的构成如下。
红色部分:

XML/HTML Code复制内容到剪贴板
  1. ((width*y)+x)*4  

绿色部分:

XML/HTML Code复制内容到剪贴板
  1. ((width*y)+x)*4+1  

蓝色部分:

XML/HTML Code复制内容到剪贴板
  1. ((width*y)+x)*4+2  

透明度部分:

XML/HTML Code复制内容到剪贴板
  1. ((width*y)+x)*4+3  

(2)

XML/HTML Code复制内容到剪贴板
  1. context.putImageData(imagedata,dx,dy)  

 该函数允许开发人员传入一组图像数据,其格式与最初从canvas上获取来的是一样的。
(3)

XML/HTML Code复制内容到剪贴板
  1. context.createImageData(sw,sh)  

 这个函数可以创建一组图像数据并绑定在canvas对象上。
如果canvas中的图片并发来自包含它的页面所在的域,页面脚本将不能取得其中的数据。

HTML / CSS 相关文章推荐
CSS3中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 HTML / CSS
Html5 audio标签样式的修改
Jan 28 #HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 #HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 #HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 #HTML / CSS
Html5实现二维码扫描并解析
Jan 20 #HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 #HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 #HTML / CSS
You might like
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
如何在PHP中使用Oracle数据库(5)
2006/10/09 PHP
php中变量及部分适用方法
2008/03/27 PHP
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
如何实现JS函数的重载
2006/09/22 Javascript
jquery 实现的全选和反选
2009/04/15 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
在Python的Django框架中加载模版的方法
2015/07/16 Python
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
python 实现倒排索引的方法
2018/12/25 Python
Python流程控制 while循环实现解析
2019/09/02 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
某科技软件测试面试题
2013/05/19 面试题
学习十八大报告感言
2014/02/04 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
工地安全质量标语
2014/06/07 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
拉贝日记观后感
2015/06/05 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫