html5的理解,谈谈对html5的认识掌握和思考
SVG 背景
SVG是Scalable Vector Graphics的缩写，意思是可伸缩的矢量图形。1998年，万维网联盟成立了一个工作组，开发了一种通过XML表示矢量图形的技术——SVG！由于SVG也是一个XML文件，它继承了XML的开放性、可移植性和交互性的优点。现在几乎所有主流浏览器都支持SVG。您可以从这里获得更多兼容性信息，包括：
使用嵌入或对象元素显示基本SVG图形；
使用img显示SVG图形；
应用SVG图形作为CSS背景图像；
在HTML文档中直接使用svg标签(需要HTML5支持)；
对使用CSS或外部对象元素的HTML元素使用SVG变换、滤镜等特效；
在SVG对象上使用类似photoshop的效果，包括模糊和颜色处理；
对SVG图像使用动画；
使用SVG格式的字体；
* SVG
*基本内容
* SVG不是HTML5的专属内容。
* HTML5提供了关于SVG的原生内容。
HTML5出现之前，有SVG内容。
* SVG，简单来说就是矢量图。
* svg文件的扩展名为。SVG
* SVG使用XML语法。
*概念
* SVG是一种使用XML技术描述2D图形的语言。
* SVG的特性
* SVG图形可以被搜索引擎抓取。
* SVG在不降低图像质量的情况下被放大。
SVG和Canvas的区别
* SVG
*独立于分辨率
*支持事件绑定
*大渲染区域的程序(如百度地图)
*不能用于实现网页游戏
*画布
*取决于分辨率
*不支持事件绑定。
*最适合的网页游戏
*图像保存在。“jpg”格式
*使用
*网页中的一些小图标
*网页中的动态特殊效果(动画效果)
* html 5中使用SVG
*使用svg/svg元素
*功能-类似于画布元素
*默认尺寸为300像素* 150像素
*使用CSS样式
*使用svg来绘制图形，必须定义SVG元素
*绘制图形
*矩形元素复制代码代码如下：
rect x= y= width= height= /
！声明文档类型
超文本标记语言
头
标题图形矩形/标题
meta charset=utf-8 /
/头
身体
！-
如果在HTML页面中使用svg标签
*定义svg/svg元素
*类似于画布元素的功能
*默认尺寸为300像素* 150像素
*设置宽度和高度-属性和样式
*所有用svg绘制的图形必须在svg元素中定义。
*用svg绘制的图形与HTML页面相关。
-
svg style=背景：粉色；宽度：400px高度：400像素；
！-
绘制矩形-rect/
* x和y-绘制矩形左上角的坐标值。
*宽度和高度-绘制矩形的宽度和高度。
*必须使用属性方法，不能使用样式方法。
*默认颜色是黑色
颜色——你可以使用属性和样式。
* fill-设置填充颜色。
*笔画-设置笔画颜色
设置线条宽度
*笔画宽度
注意
* SVG绘制的图形是通过style来设置样式的，使用的不是CSS属性，而是SVG属性。
-
rect x= 10 y= 10 width= 100 height= 100 fill= blue stroke= black stroke-width= 5 /
rect x= 120 y= 10 width= 100 height= 100 style= fill:blue；笔画：黑色；笔画宽度：5 /
/svg
/body
/html
*圆形元素
circle cx= cy= r= /
身体
svg宽度= 500像素高度= 500像素
！-
画一个圆-圆
* cx和cy-圆的圆坐标值
* r-圆的半径
-
circle CX= 100 cy= 100 r= 100 fill= pink /
/svg
/body
*椭圆形元素
椭圆cx= cy= rx= ry=
身体
svg宽度= 300像素高度= 300像素
椭圆CX= 150 cy= 150 rx= 150 ry= 100 /
/svg
/body
*线性元素
第x1行= y1= x2= y2= /
身体
！-
一个svg元素可以只包含一个图形元素，还是可以包含多个图形元素？
*可以包含多个图形元素。
-
svg宽度= 300像素高度= 300像素
线条x1= 10 y1= 10 x2= 200 y2= 200 stroke-width= 10 stroke= black /
线条x1=200 y1=200 x2=200 y2=10 笔画宽度=10 笔画=黑色/
/svg
/body
*折线元素
折线点=
身体
svg宽度= 500像素高度= 500像素
！-
折线元素-折线
*点-设置起点、顶点和终点。
* x和y由，分隔。
*多个点由空格分隔。
折线的特征
*默认为折线中的区域(起点到终点)，默认为黑色。
-
折线点=10，10 200，10 200，200 10，200 10，10 笔画宽度=5 笔画=黑色填充=白色/
/svg
/body
*多边形元素
多边形点= /
身体
svg宽度= 500像素高度= 500像素
折线点=10，10 200，10 200，200 10，200 100，100 10，10 笔画宽度=5 笔画=黑色填充=白色/
/svg
/body
*特效元素
* Gradient-渐变元素在defs元素中定义。
*线性梯度-线性梯度
*此元素是开始元素。
线性梯度x1=% y1=% x2=% y2=%
停止偏移量=% stop-color=color /
/线性梯度
身体
svg宽度= 400像素高度= 400像素
！-
设置线性渐变-线性渐变
*用法-在defs元素中定义渐变。
*特征-有一个基线
*起点坐标值-x1和y1
*终点坐标值-x2和y2
*注意
*此元素是开始元素。
线性梯度/线性梯度
* X1和y1、x2和y2的值都是百分比。
*定义id属性
*用于将设置的渐变添加到绘制的图形元素中。
*使用stop元素-设置渐变的颜色
* offset-设置渐变颜色的位置
*该值也是百分比值。
* stop-color-设置渐变颜色。
* stop-opacity-设置渐变颜色的透明度
-
面数
linear gradient id= mygrd x1= 0 y1= 0 x2= 100% y2= 100%
停止偏移量=0 stop-color=red /
停止偏移=50% 停止-颜色=绿色/
停止偏移=100% 停止-颜色=蓝色/
/线性梯度
/defs
！-
我如何将上面设置的线性渐变添加到下面的矩形中？
*使用具有url值的fill属性(渐变元素的id值)
-
rect x= 0 y= 0 width= 400 height= 400 fill= URL(# mygrd)/
/svg
/body
*扇形(射线)梯度-径向梯度
*滤镜-高斯模糊
*过滤器使用过滤器元件。
* feGaussianBlur元素-高斯模糊
* in=SourceGraphic
* STD deviation-设置模糊度。
复制代码如下：
身体
svg宽度= 500像素高度= 500像素
！-
如何设置高斯模糊滤镜
* defs/defs元素定义-过滤器是在这个元素中定义的
*定义过滤器/过滤器元素-代表SVG的过滤器
*定义高斯模糊元素feGaussianBlur
*属性
* in= source graphic -固定书写
* STD deviation-设置模糊度。
*定义过滤器元素的id属性值
*便于在绘制图形时添加元素。
-
面数
筛选器id=myfilter
feGaussianBlur in= source graphic STD deviation=5/
/过滤器
/defs
！-
如何把上面的高斯模糊和下面的元素联系起来？
*使用url(#id)值的过滤器属性
*设置当前图形的过滤器。
-
rect x= 100 y= 100 width= 100 height= 100 filter= URL(# my filter) fill= green /
/svg
/body
*注意-在defs元素中定义
* TWO.js
*基本内容
* js库介绍
* three . js-专门用于绘制3D图形。
* two . js-专用于绘制2D图形
* two.js支持的格式
* SVG-默认
*画布
* web GL-专用于绘制图像
*如何使用two.js
*将two.js文件引入HTML页面
*在HTML页面中定义一个容器(div)
*在javascript代码中
*获取HTML页面中的容器
*创建一个Two对象并将其添加到容器中。
新的两个(参数)。appendTo(元素)；
*使用two.js提供的API方法进行绘制。
*使用two.js提供的方法设置图形。
*使用update()方法进行绘制。
*创建两个对象
*构造函数-新的两个(参数)
* params参数-设置当前对象的信息。
* type-设置当前使用的格式(两个。Types.svg)
* SVG-默认值
*画布
* webgl
*宽度和高度-设置宽度和高度。
*全屏-设置是否全屏。
*布尔值，true表示全屏
*图解方法
* makeLine()-绘制线条。
* make rectangle()-绘制一个矩形
* make circle()-画一个圆
* make ellipse()-绘制一个椭圆。
*动画方法
* update()-更新动画
* play()-添加动画(循环)
* pause()-删除动画
*设置绘制图形的样式。
*调用两个对象的drawing方法绘制图形，并返回graphic对象。
*通过图形对象，设置相关的属性值。
*分组操作
*两个。组
*动画效果
* bind(事件、回调)方法-事件绑定
*事件绑定事件名称
* update-对应update()方法的函数。
*所有DOM事件都可以绑定。
*回调-事件处理功能
*扩展的内容
*前端开发工具
* Aptana Studio 3-代码提示
* Webstrom——国内前端开发者的神器
*在实际开发中
*多用途SVG
*无失真
*可以被搜索
*页面优化-减少外部链接
* a href=
* img src=
* Canvas-HTML绘制图形
*实际操作中，以图片的形式出现(。png)
*无法被搜索引擎抓取
*放大后失真
* SVG内容
*内容很大。
*静态绘制图形
*动态动画效果
*独家提供活动。
*网上关于SVG的资料很少(没有书)
* SVG规范(W3C英语)
* SVG或CANVAS是在HTML页面中定义的
*只能定义一个元素，还是可以定义多个元素？
*在一个HTML页面中可以定义多个svg或canvas元素。
* SVG或CANVAS都允许同时定义(绘制)多个图形。
*在实际开发中使用
* SVG在以后的工作开发中，使用率不高。
* SVG图片通常由UI设计师完成。
* SVG即使我们自己设计(画)
*目前互联网上有很多专门提供现成SVG图片的网站。
*使用JS库
- .
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。