html5-svg和Two.js的使用方法（附案例）
* 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绘制两个半圆（作业）
转载于:https://www.cnblogs.com/w190/p/7376007.html
html5-svg和Two.js的使用方法（附案例）相关推荐
- python3-正则表达式基本使用方法(附案例)_python正则表达式
python正则表达式 一.re模块 python中处理正则表达式的一个模块,通过re模块的方法,把正则表达式pattern编译成正则 对象,以便使用正则对象的方法 1.compile加速 re.co ...
- html5 加载svg,HTML5 SVG应用（1）——loading效果
先看一下效果: 链接 代码: y="0px" width="40px" height="40px" viewBox="0 0 40 ...
- html5 背景 svg,HTML5 SVG生成图案花纹背景样式的js插件
Textures.js是一款非常实用的HTML5 SVG生成图案花纹背景样式的js插件.该js图案花纹背景插件基于d3.js,可以生成各种SVG图案花纹背景.这些图案包括各种线条.圆点.网格等,你甚至 ...
- HTML5 SVG牛顿球灯泡动画js特效
下载地址HTML5 SVG牛顿球灯泡动画特效是一款不停摆动的牛顿灯泡网页动态特效. dd:
- HTML5 SVG彩色斑点缓缓落下背景动画js特效
下载地址 HTML5 SVG彩色斑点缓缓落下背景动画特效是一款漂亮唯美的彩色斑点雨落下动画特效. dd:
- HTML5 SVG纸屑按钮动画js特效
下载地址HTML5 SVG纸屑按钮动画特效是一款html5基于svg制作的点击按钮纸屑散开飘落动画特效. dd:
- html5波浪线条,HTML5 svg炫酷波浪线条动画插件
这是一款HTML5 svg炫酷波浪线条动画插件.该波浪动画插件基于tweenMax和SVG,也可以作为jQuery插件来使用,可以制作出漂亮的波浪线条动画特效. 使用方法 在页面中引入jquery和T ...
- html5列表菜单特效,HTML5 SVG汉堡包菜单按钮分段动画特效
这是一款效果非常炫酷的HTML5 SVG汉堡包菜单按钮分段动画特效.该菜单按钮特效在用户点击汉堡包按钮时,按钮会分割为多段,并旋转变形为关闭按钮的状态.当再次点击该按钮时,它会逆向变形为汉堡包图标. ...
- html5圆形提交按钮样式,HTML5 SVG带圆形进度条动画的提交按钮特效
这是一款非常实用的HTML5 SVG带圆形进度条动画的提交按钮特效.该提交按钮在被点击之后,按钮变形为一个圆形的进度条,当进度条运行一周之后,可以设置提交成功和提交失败的两种按钮状态. 制作方法 HT ...
最新文章
- jupyter notebook中的魔法函数
- tensorflow 1.0 学习：参数和特征的提取
- 如何处理HTML5新标签的浏览器兼容问题?
- CA knowledge study
- Curator实现分布式锁的基本原理-InterProcessMutex.internalLock
- COJ1196(Staginner 去爬山)
- 【Java】HashMap源码（1.7）
- LeetCode 494. 目标和（DFS+DP）
- vue ---- 监听器
- gbadev上的资料搬运贴
- linux at24测试程序,C51读写AT24C04源代码及AT24C04测试程序
- 功能安全专题之功能安全概念阶段
- SENT:Sentence-level Distant Relation Extraction via Negtive Training-ACL2021
- FRP内网穿透搭建-无公网IP时外部访问服务解决办法
- 2021-2027全球与中国陶瓷基板市场现状及未来发展趋势
- 相对位置编码 relative position encoding
- Qt 弹出对话框选择图片并显示
- compatible version of org.springframework.boot.actuate.health.CompositeHealthIndicator
- 【头歌】重生之机器学习-线性回归
- 基本粒子结构以及宇宙现象的徦说