• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
123456868 显示全部楼层 发表于 2021-10-26 13:58:22 |阅读模式 打印 上一主题 下一主题
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 还支持放射性渐变,所谓放射性渐变就是颜色会介于两个指定圆间的锥形地域平滑变化。放射性渐变和线性渐变使用的颜色终止点是一样的。

XML/HTML Code复制内容到剪贴板
       
  • 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复制内容到剪贴板
       
  • fillText(text,x,y,maxwidth)  
(2)
XML/HTML Code复制内容到剪贴板
       
  • strokeText(text,x,y,maxwidth)  
两个函数的参数完全雷同,必选参数包罗文本参数以及用于指定文本位置的坐标参数。maxwidth是可选参数,用于限定字体巨细,它会将文本字体强制紧缩到指定尺寸。别的,还有一个measureText函数可供使用,该函数会返回一个度量对象,此中包含了在当前context情况下指定文本的现实显示宽度。
文本呈现相关的context属性

阴影属性

Canvas API最有效的特性之一是允许开发人员直接访问canvas底层的像素数据。
(1)
XML/HTML Code复制内容到剪贴板
       
  • 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复制内容到剪贴板
       
  • ((width*y)+x)*4  
绿色部分:
XML/HTML Code复制内容到剪贴板
       
  • ((width*y)+x)*4+1  
蓝色部分:
XML/HTML Code复制内容到剪贴板
       
  • ((width*y)+x)*4+2  
透明度部分:
XML/HTML Code复制内容到剪贴板
       
  • ((width*y)+x)*4+3  
(2)
XML/HTML Code复制内容到剪贴板
       
  • context.putImageData(imagedata,dx,dy)  
该函数允许开发人员传入一组图像数据,其格式与最初从canvas上获取来的是一样的。
(3)
XML/HTML Code复制内容到剪贴板
       
  • context.createImageData(sw,sh)  
这个函数可以创建一组图像数据并绑定在canvas对象上。
假如canvas中的图片并发来自包含它的页面地点的域,页面脚本将不能取得此中的数据。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作