* svg
* 基本内容
* SVG不属于HTML5专用内容
* HTML5提供有关SVG原生的内容
* 在HTML5出现之前,就有SVG内容
* SVG简单来说就是矢量图
* SVG文件扩展名为".svg"
* SVG使用的是XML语法
* 概念
* svg 是一种使用XML技术描述二维图形的语言
* SVG特点
* SVG绘制图形可以被搜索引擎抓取
* SVG在图片质量不下降的情况下,被放大
* SVG与canvas的区别(面试题)
* SVG
* 不依赖分辨率
* 支持事件绑定
* 大型渲染区域程序(例如百度地图)
* 不能用来实现网页游戏
* canvas
* 依赖分辨率
* 不支持事件绑定
* 最适合网页游戏开发
* 保存为".jpg"格式图片
* 用途
* 网页中一些小的图标
* 网页中动态特效(动画效果)
* HTML5中使用SVG
* 使用<svg></svg>
* 作用 - 类似于<canvas>元素
* 默认大小为300px*150px
* 可以使用css样式
* 使用SVG绘制图形,必须定义在<svg>元素中
* 绘制图形
* 矩形元素
* <rect x="" y="" width="" height="" />
* 圆形元素
* <circle cx="" cy="" r="" />
* 椭圆元素
* <ellipse cx="" cy="" rx="" ry= ""/>
* 直线元素
* <line x1="" y1="" x2="" y2=""/>
* 折线元素
* <polyline points=""/>
* 绘制多边形
* <polygon points=""/>
* 特效元素
* 渐变 - 渐变元素定义在<defs>元素内
* 线型渐变 - <inearGradient>
* 该元素是一个起始元素
*<linearGradient id="mygrd" x1="0%" y1="0%" x2="0%" y2="100%" >
<stop offset="50%" stop-color="green"></stop>
</linearGradient>
* 扇形(射型)渐变 - <radialGradient>
* 滤镜 - 高斯模糊
* 滤镜使用<filter>元素
* <feGaussianBlur>元素 - 高斯模糊
* in="SourceGraphic"
* stdDeviation - 设置模糊程度
* 注意 - 定义在<defs>元素中
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>什么是HTML5中的SVG元素</title> 6 </head> 7 <body> 8 <svg width="100%" height="300" version="1.1"> 9 <rect x="100" y="100" width="300" height="100" fill="biue" stroke="black" stroke-width="4"></rect> 10 </svg> 11 </body> 12 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>svg绘制矩形</title> 6 </head> 7 <body> 8 <!-- 9 在HTML页面中使用SVG标签的话 10 * 定义<svg>元素 11 * 类似于<canvas></canvas>元素的作用 12 * 默认大小300px*150px 13 * 设置宽度和高度 - 属性和style 14 * 利用svg绘制所有图形,必须定义在<svg>元素内 15 * 利用svg绘制的图形与html文件有关 16 --> 17 <svg style="background: pink; width: 400px; height: 400px;" > 18 <!-- 19 绘制矩形 - <rect/> 20 * x和y - 绘制矩形的左上角坐标 21 * width和height - 绘制图形的宽度和高度 22 * 必须使用属性样式不能用style样式 23 * 默认颜色 - 黑色 24 设置颜色 - 既可以使用属性还可以使用样式 25 * fill - 设置填充颜色 26 * stroke - 设置描边颜色 27 设置线体宽度 28 * stroke-width 29 * svg绘制的图形,使用style方式设置样式,使用的不是CSS属性,而是svg属性 30 --> 31 <rect x="10" y="10" width="100" height="100" 32 fill="blue" stroke="black" stroke-width="5"></rect> 33 <rect x="120" y="10" 34 style="fill: blue; stroke: black;" 35 ></rect> 36 37 </svg> 38 </body> 39 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>SVG绘制圆形</title> 6 </head> 7 <body> 8 <svg width="500px" height="500px"> 9 <!-- 10 绘制圆形 - <circle> 11 * cx和cy - 圆形的圆形坐标值 12 * r-圆形的半径 13 * 14 --> 15 <circle cx="100" cy="100" r="100" fill="pink"></circle> 16 </svg> 17 </body> 18 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>SVG圆形跟随鼠标</title> 6 </head> 7 <body> 8 <svg id="mysvg" width="300px" height="300px" style="background: pink"> 9 10 <circle id="crl" cx="100" cy="100" r="30"></circle> 11 </svg> 12 <script type="text/javascript"> 13 14 /* 15 * svg在使用过程中 16 * * SVG提供的所有元素,可以绑定DOM事件 17 * * SVG提供的元素的特殊属性,并不能像HTML元素的属性一样去操作 18 */ 19 //圆形跟随鼠标移动 onmousemove事件 20 var svg = document.getElementById("mysvg"); 21 var crl = document.getElementById("crl"); 22 console.log(crl.cx.animVal.value); 23 svg.onmousemove = function(event) { 24 crl.cx = event.offsetX; 25 crl.cy = event.offsetY; 26 } 27 /*crl.onmousemove = function(event) { 28 crl.cx = event.offsetX; 29 crl.cy = event.offsetY; 30 } 31 */ 32 </script> 33 </body> 34 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>SVG绘制椭圆</title> 6 </head> 7 <body> 8 <svg width="300px" height="300px" > 9 <ellipse cx="150" cy="150" rx="100" ry="150" ></ellipse> 10 </svg> 11 </body> 12 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>SVG设置线条</title> 6 </head> 7 <body> 8 <!-- 9 svg元素中只能包含一个图形元素,还是多个图形元素? 10 11 --> 12 <svg width="300px" height="300px" > 13 <line x1="10" y1="10" x2="200" y2="200" stroke-width="10" stroke="black"></line> 14 <line x1="200" y1="200" x2="200" y2="10" stroke-width="10" stroke="black"></line> 15 </svg> 16 </body> 17 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>SVG绘制折线</title> 6 </head> 7 <body> 8 <svg width="500px" height="500px"> 9 <!-- 10 points元素 - 折线 11 * points - 设置起点,折点及终点 12 * * X和Y之间使用","分割 13 * * 多个点之间使用空格分隔 14 * 15 * 折线的特点 16 * * 默认将折线中的区域(起点到终点),默认提供黑色 17 --> 18 <polyline points="10,10 200,10 200,200 10,200 10,7.5" stroke="black" 19 stroke-width="5" fill="white"></polyline> 20 </svg> 21 </body> 22 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>SVG折线绘制多边形</title> 6 </head> 7 <body> 8 <polyline points="10,10 200,10 200,200 100,100 10,10 10,7.5" stroke="black"stroke-width="5" fill="white"></polyline> 9 </body> 10 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>绘制多边形</title> 6 </head> 7 <body> 8 <svg width="400px" height="400px"> 9 <polygon points="10,10 200,10 200,200 100,100 10,10 10,7.5" stroke="black"stroke-width="5" fill="white"></polygon> 10 11 </svg> 12 </body> 13 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用多个svg或canvas元素</title> 6 </head> 7 <body> 8 <svg style="background: pink"></svg> 9 <svg style="background: blue"></svg> 10 <canvas id="" width="" height="" style="background: yellow;"></canvas> 11 <canvas id="" width="" height="" style="background: red;"></canvas> 12 </body> 13 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>SVG定义线型渐变</title> 6 </head> 7 <body> 8 <svg width="400px" height="400px"> 9 <!-- 10 设置线型渐变 - <linearGradient></linearGradient> 11 * 用法 - 将渐变定义在<defs>元素中 12 * 特点 - 具有基准线 13 * * 起点坐标值 - x1和y1 14 * * 终点坐标值 - x2和y2 15 * 注意 16 * * 该元素是起始元素 17 * <linearGradient></linearGradient> 18 * * x1和y1、x2和y2的值都是百分值 19 * * 定义id属性 20 * * 用于将设置的渐变添加到绘制的图形中 21 * 使用<stop>元素 - 设置渐变的颜色 22 * offset - 设置渐变颜色的位置 23 * 该值也是百分值 24 * stop-color - 设置渐变颜色 25 * stop-opacity - 设置渐变颜色的透明度 26 --> 27 28 <defs> 29 <linearGradient id="mygrd" x1="0%" y1="0%" x2="0%" y2="100%" > 30 <stop offset="0%" stop-color="red"></stop> 31 <stop offset="50%" stop-color="green"></stop> 32 <stop offset="100%" stop-color="blue"></stop> 33 </linearGradient> 34 </defs> 35 <!-- 36 如何可以将上面设置线型渐变,添加在下面的矩形中 37 * 使用fill属性,值为url(#渐变元素的id值) 38 --> 39 <rect x="0" y="0" width="300" height="400" fill="url(#mygrd)"></rect> 40 </svg> 41 </body> 42 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>设置高斯模糊</title> 6 </head> 7 <body> 8 <svg width="500px" height="500px"> 9 <!-- 10 如何设置高斯模糊 11 * 定义<defs></defs>元素 - 滤镜定义在该元素中 12 * 定义<filter></filter>元素 - 表示SVG的滤镜 13 * 定义高斯模糊元素<feGaussianBlur></feGaussianBlur> 14 * 属性 15 * in = "SourceGraphic" - 固定写法 16 * stdDeviation - 设置模糊程度 17 * 为<filter></filter>元素定义id属性值 18 * 方便添加在绘制图形的元素中 19 --> 20 <defs> 21 <filter id="myfilter"> 22 <feGaussianBlur in="SourceGraphic" stdDeviation=0> 23 <!-- 24 如何将上面的高斯模糊与下面的元素进行关联 25 * 使用filter属性,值为url(#id) 26 --> 27 </feGaussianBlur> 28 </filter> 29 </defs> 30 31 <rect x="100" y="100" width="100" height="100" 32 filter="url(#myfilter)" fill="red"></rect> 33 34 </svg> 35 </body> 36 </html>
* TWO.js
* 基本内容
* js库介绍
* three.js - 专门用于绘制三维图形
* two.js - 专门用于绘制二维图形
* two.js支持的格式
* svg - 默认
* Canvas
* webGL - 专门用于绘制图形
* 如何使用Two.js
* 在HTML页面中引入two.js文件
* 在HTML页面中定义容器(<div>)
* 在javascript代码中
* 获取HTML页面中的容器
* 创建Two对象,将该对象添加到容器中
new Two(params).appendTo(Element);
* 使用two.js提供的API方法进行绘制
* 利用two.js提供的方法,设置图形
* 利用update()方法进行绘制
* 创建Two对象
* 构造器 - new Two(params)
* params参数 - 设置当前对象的信息
* type - 设置当前使用的格式(Two.Types.svg)
* svg - 默认值
* canvas
* webgl
* width和height - 设置宽度和高度
* fullscreen - 设置是否全屏
* Boolean值,true表示全屏
* 图形方法
* makeLine() - 绘制线条
* makeRectangle() - 绘制矩形
* makeCircle() - 绘制圆形
* makeEllipse() - 绘制椭圆
* 动画方法
* update() - 更新动画
* play() - 添加动画(循环)
* pause() - 删除动画
* 设置绘制图形的样式
* 调用Two对象的绘制方法绘制图形时,返回该图形对象
* 通过该图形对象,设置相关属性值
* 分组操作
* Two.Group
* 动画效果
* bind(event,callback)方法 - 事件绑定
* event - 绑定事件名称
* update - 对应update()方法的作用
* 所有的DOM事件都可以绑定
* callback - 事件处理函数
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>如何使用TWO.j</title> 6 <!--引入two.js文件 --> 7 <script src="two.js"></script> 8 </head> 9 <body> 10 <!-- 11 在HTML页面中定义容器(元素) 12 * 使用<svg></svg>元素 13 * 使用<canvas></canvas>元素 14 * 使用<div></div>元素 15 * 16 --> 17 <div id="d"></div> 18 <script> 19 //3. 获取页面中的<div>元素 20 var d = document.getElementById("d"); 21 //4. 设置SVG的宽度和高度 22 //*params-Object类型{} 23 var params = { //设置svg大小 24 width:800, 25 height:800 26 } 27 28 //5. 创建Two对象 29 var two = new Two(params); 30 //6. 将创建的Two对象,添加到页面容器中 31 two.appendTo(d); 32 //7. 使用TWO.js提供的API方法 33 two.makeCircle(500,200,100);//设置圆形 34 two.update();//绘制方法 35 // 36 </script> 37 </body> 38 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用two.js绘制图形</title> 6 <script src="two.js"></script> 7 </head> 8 <body> 9 <div id="elem"></div> 10 <script type="text/javascript"> 11 var elem = document.getElementById("elem"); 12 var params = { 13 type : Two.Types.svg, 14 fullscreen : true //是否全屏 15 } 16 var two = new Two(params).appendTo(elem); 17 //绘制圆形 18 two.makeCircle(50,50,30); 19 /* 20 * 绘制矩形 21 * makeRectangle(x,y,width,height) 22 * x和y - 表示绘制矩形的坐标值(中心点) 23 * width和height - 表示绘制矩形的宽度和高度 24 */ 25 two.makeRectangle(60,60,100,100); 26 //绘制椭圆 27 two.makeEllipse(300,300,20,100); 28 two.update(); 29 </script> 30 </body> 31 </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>设置图形样式</title> <script src="two.js"></script> </head> <body> <div id="elem"></div> <script> var elem = document.getElementById("elem"); var two = new Two({ fullscreen : true, }).appendTo(elem); //调用绘制圆形方法时,该方法返回圆形对象 var circle = two.makeCircle(200,200,200); //利用圆形对象设置相关信息 circle.fill = "pink"; circle.stroke = "blue"; circle.lineWidth = 10; two.update(); </script> </body> </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>two.js分组操作</title> 6 <script src="two.js"></script> 7 </head> 8 <body> 9 <div id="elem"></div> 10 <script> 11 var elem = document.getElementById("elem"); 12 var two = new Two({ 13 fullscreen : true 14 }).appendTo(elem); 15 //绘制图案 16 var circle = two.makeCircle(200,200,110); 17 /* 18 * circle.fill = "pink"; 19 * circle.stroke = "biue"; 20 * circle.linewidth=5; 21 */ 22 var rect = two.makeRectangle(400,400,100,100); 23 /* 24 * rect.fill="pink"; 25 * rect.stroke= "biue"; 26 * rect.linewidth=5; 27 */ 28 /* 29 * 如果在HTML页面绘制多个图形,并且每个图形设置样式相同或类似 30 * * 默认方式 - 每个图形重新设置一次(代码重复) 31 * * 分组操作(Two.Group) - 当前案例 32 * * 将绘制的圆形和矩形分为一组 33 * * 针对这一组,统一设置样式 34 * * 实际操作 35 * * 利用Two对象的makeGroup(object)方法进行分组 36 * * object - 设置分为一组的图案 37 * * 格式 - 允许传递多个(不定)个参数 38 * * 该方法返回Group对象 39 * * 通过Group对象,统一针对这一组设置样式 40 */ 41 var group = two.makeGroup(circle,rect); 42 group.fill = "yellow"; 43 group.stroke = "red"; 44 group.linewidth = 10; 45 circle.fill = "green"; 46 two.update(); 47 </script> 48 </body> 49 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>-two.js实现动画效果</title> 6 <script src="two.js"></script> 7 </head> 8 <body> 9 <div id="elem"> 10 11 </div> 12 <script type="text/javascript"> 13 var elem = document.getElementById("elem"); 14 var two = new Two({ width: 285, height: 200 }).appendTo(elem); 15 var circle = two.makeCircle(-70, 0, 50); 16 circle.fill = '#FF8000'; 17 18 var rect = two.makeRectangle(70, 0, 100, 100); 19 rect.fill = 'rgba(0, 200, 255, 0.75)'; 20 21 var group = two.makeGroup(circle,rect); 22 group.translation.set(two.width / 2, two.height / 2); 23 group.scale = 0; 24 group.noStroke(); 25 26 /* 27 * 动画效果 28 * two.bind("update",function(){ 29 * 实现动画逻辑代码 30 * }).play(); 31 * 32 * 上述写法类似于DOM中的setInteval() 33 * setInterval(function(){ 34 * 实现动画逻辑 35 * },时间) 36 */ 37 two.bind("update",function(){ 38 if (group.scale > 0.9999) { 39 group.scale = group.rotation = 0; 40 } 41 var t = (1 - group.scale) * 0.125; 42 // 0.125 0.25 0.375 0.5 0.625 0.75 0.875 1 43 group.scale += t; 44 group.rotation += t * 4 * Math.PI; 45 }).play(); 46 47 //two.update(); 48 </script> 49 </body> 50 </html>
* 扩展内容
* 前端开发工具
* Aptana Stydio 3-代码提升
* Webstrom - 国内前端开发神器
* 实际开发中
* 多用SVG
* 不失真
* 可被搜索
* 页面优化 - 减少外部连接
* 外部连接
* <a href="">
* <img src="">
* canvas - HTML绘制图形
* 实际运行中,是以图片方式出现(.png)
* 不能被搜索引擎抓取
* 放大后失真
* 游戏版本
* 480*680
* 1024*768
* SVG内容
* 内容量非常大
* 静态绘制图形
* 动态动画效果
* 专门提供事件
* 网上关于SVG的资料很少(没有书籍)
* svg的规范(w3c英文版)
* SVG或canvas在HTML页面中定义
* 是只能定义一个元素,还是可以定义多个元素?
* 在HTML5中可以定义多个SVG和canvas元素
* SVG还是CANVAS都是允许定义(绘制)多个图形
* 在实际开发中的使用
* SVG在将来的工作开发,使用率并不高
* SVG图片一般都是由UI设计师来完成
* SVG即使自己来设计(绘制)
* 目前网络上有很多专门提供现成的SVG图片的网站
* 使用JS库
* svg绘制两个半圆(作业)