1.特效元素 1.设置渐变 * 注意 * 渐变元素需要定义id属性,便于其他元素进行引用 * 渐变元素定义在<defs>元素内 * <defs>元素内定义 - 表示该元素允许重复使用 1.线性渐变 * 基准线 - 起点和终点坐标值 * 渐变颜色 <linearGradient id="" x1="" y1="" x2="" y2=""> <stop offset="" stop-color=""/> * offset - 表示设置渐变颜色的位置 * 值范围为 0-1, 是百分值 0%-100% * stop-color - 表示设置的渐变颜色 * stop-opacity - 表示设置渐变颜色的透明度 </linearGradient> * id - 便于其他元素进行引用 * x1和y1 - 表示基准线的起点坐标值 * 值范围为 0-1, 是百分值 0%-100% * x2和y2 - 表示基准线的终点坐标值 * 值范围为 0-1, 是百分值 0%-100% 例如 - <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>SVG设置渐变</title>
- </head>
- <body>
- <svg width="800" height="500">
- <!--
- 设置渐变
- * 定义<defs>元素 - 表示该元素内设置可以重复使用
- * <defs></defs> - 起始元素
- * 定义线性渐变<linearGradient>元素
- * <linearGradient></linearGradient> - 起始元素
- * 定义<stop>元素
- * 设置当前渐变的颜色
- 将渐变绘制出来
- * 使用SVG提供的6种基础形状元素
- * 使用fill指定渐变 - fill="url(#id)"
- -->
- <defs>
- <linearGradient id="grd" x1="0" y1="0" x2="1" y2="1">
- <stop offset="0" stop-color="red" stop-opacity="0.5" />
- <stop offset="0.5" stop-color="green" stop-opacity="0.8" />
- <stop offset="1" stop-color="blue" stop-opacity="1" />
- </linearGradient>
- </defs>
- <rect x="0" y="0" width="200" height="200" fill="url(#grd)" />
- <circle cx="320" cy="110" r="100" fill="url(#grd)" />
- </svg>
- </body>
- </html>
复制代码
效果: 2.射线(径向)渐变 * 基准线 - 中心点和焦点组成 * 中心点 - 描述了渐变边缘位置 * 焦点 - 描述了渐变的中心 <radialGradient id=" " cx=" " cy=" " r=" " fx=" " fy=" "> <stop offset=" " stop-color=" "/> * offset - 表示设置渐变颜色的位置 * 值范围为 0-1, 是百分值 0%-100% * stop-color - 表示设置的渐变颜色 * stop-opacity - 表示设置渐变颜色的透明度 </radialGradient> * id - 便于其他元素进行引用 * cx和cy - 表示基准线中的中心点坐标值 * 值范围为 0-1, 是百分值 0%-100% * r - 设置其边缘位置 * 值范围为 0-1, 是百分值 0%-100% * fx和fy - 表示基准线中的焦点坐标值 * 值范围为 0-1, 是百分值 0%-100% 例如: - <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>SVG设置径向渐变</title>
- </head>
- <body>
- <svg width="800" height="500">
- <!--
- 设置渐变
- * 定义<defs></defs>元素
- * 定义射线渐变<radialGradient>元素
- -->
- <defs>
- <radialGradient id="grd1">
- <stop offset="0" stop-color="red" />
- <stop offset="1" stop-color="blue" />
- </radialGradient>
- <radialGradient id="grd2" cx="0" cy="0">
- <stop offset="0" stop-color="red" />
- <stop offset="1" stop-color="blue" />
- </radialGradient>
- <radialGradient id="grd3" r="1">
- <stop offset="0" stop-color="red" />
- <stop offset="1" stop-color="blue" />
- </radialGradient>
- <radialGradient id="grd4" fx="1" fy="1">
- <stop offset="0" stop-color="red" />
- <stop offset="1" stop-color="blue" />
- </radialGradient>
- <radialGradient id="grd5">
- <stop offset="0" stop-color="red" />
- <stop offset="0.5" stop-color="yellow" />
- <stop offset="1" stop-color="blue" />
- </radialGradient>
- <radialGradient id="grd6" cx="0" cy="0">
- <stop offset="0" stop-color="red" />
- <stop offset="0.5" stop-color="yellow" />
- <stop offset="1" stop-color="blue" />
- </radialGradient>
- <radialGradient id="grd7" r="1">
- <stop offset="0" stop-color="red" />
- <stop offset="0.5" stop-color="yellow" />
- <stop offset="1" stop-color="blue" />
- </radialGradient>
- <radialGradient id="grd8" fx="1" fy="1">
- <stop offset="0" stop-color="red" />
- <stop offset="0.5" stop-color="yellow" />
- <stop offset="1" stop-color="blue" />
- </radialGradient>
- </defs>
- <rect x="0" y="0" width="200" height="200" fill="url(#grd1)" />
- <rect x="210" y="0" width="200" height="200" fill="url(#grd2)" />
- <rect x="420" y="0" width="200" height="200" fill="url(#grd3)" />
- <rect x="630" y="0" width="200" height="200" fill="url(#grd4)" />
- <rect x="0" y="210" width="200" height="200" fill="url(#grd5)" />
- <rect x="210" y="210" width="200" height="200" fill="url(#grd6)" />
- <rect x="420" y="210" width="200" height="200" fill="url(#grd7)" />
- <rect x="630" y="210" width="200" height="200" fill="url(#grd8)" />
- </svg>
- </body>
- </html>
复制代码
效果: 3.设置滤镜 * 定义<defs></defs>元素内 * 可以重复使用 * 定义<filter></filter>元素 * 表示使用一个滤镜 * 一般定义id属性 * 便于其他元素进行引入 * 注意 * 该元素只是滤镜的容器 * 该元素并不直接显示在HTML页面中 * 高斯模糊 <feGaussianBlur in="" stdDeviation="" /> * in - 设置高斯模糊的样式 * SourceGraphic * SourceAlpha * stdDeviation - Number值,设置模糊的程度 例如: - <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>SVG使用高斯模糊滤镜</title>
- </head>
- <body>
- <svg width="800" height="500">
- <!--
- 设置滤镜
- * 定义<defs>元素 - 表示滤镜可重复使用
- * 定义<filter>元素 - 表示使用一种滤镜元素
- * 定义id属性 - 便于其他元素进行引入
- -->
- <defs>
- <filter id="myfilter1">
- <!--
- 设置高斯模糊滤镜
- <feGaussianBlur in="" stdDeviation="" />
- -->
- <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
- </filter>
- <filter id="myfilter2">
- <feGaussianBlur in="SourceAlpha" stdDeviation="5" />
- </filter>
- </defs>
- <rect x="100" y="100" width="100" height="100" filter="url(#myfilter1)" />
- <rect x="210" y="100" width="100" height="100" filter="url(#myfilter2)" />
- </svg>
- </body>
- </html>
复制代码
效果: 2.Two.js库 1.基础内容 * 介绍 * SVG的高级内容(动画等效果),不需要掌握原生用法 * Two.js库用于封装SVG,是以我们更熟悉的方式 * 特点 * Two.js支持不同的上下文环境: * SVG * Canvas * WebGL * Two.js提供相同(统一)地API方法 * 官网 * 如何使用Two.js库 * 在HTML页面 * 引入Two.js库文件 * 定义容器元素 - <div></div> * 在JavaScript代码 * 获取HTML页面的容器元素 * 通过Two.js库提供的Two()构造函数创建Two对象 var params = {// 创建svg时初始化的数据 width : 宽度, height : 高度 } var two = new Two(params); * 将创建的Two对象添加到HTML页面容器元素内 two.appendTo(elem); * 使用Two.js库提供的API方法绘制图形 * 调用update()方法进行绘制 例如: - <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>如何使用Two.js库</title>
- <!-- 1. 引入Two.js库文件 -->
- <script src="two.js"></script>
- </head>
- <body>
- <!--
- 2. 定义用于显示矢量图的容器元素
- * <div></div>元素 - 建议使用
- -->
- <div id="d1"></div>
- <script>
- // 3. 获取HTML页面的容器元素
- var elem = document.getElementById("d1");
- /*
- 4. 通过Two(params)构造函数来创建Two对象
- * params - 创建Two对象的初始化数据
- * Object类型,{ key : value }格式
- */
- var params = {
- type : Two.Types.canvas,
- width : 285, // 默认为640px
- height : 200 // 默认为480px
- };
- var two = new Two(params);
- /*
- 5. 将创建的Two对象添加到页面容器元素中
- * Two.js库提供了appendTo()方法向容器添加Two对象
- * 注意 - appendTo()方法并不是jQuery的,在头部并没有引入jquery文件
- */
- two.appendTo(elem);
- // 6. 通过调用Two对象提供的API方法进行绘制
- var circle = two.makeCircle(72, 100, 50);
- var rect = two.makeRectangle(213, 100, 100, 100);
- // 设置绘制的圆形和矩形的样式
- circle.fill = 'blue';
- circle.stroke = 'yellow';
- circle.linewidth = 10;
-
- rect.fill = 'rgb(100, 100, 100)';
- rect.opacity = 0.75;
- rect.noStroke();// 设置矩形没有描边
- // 7. 调用update()方法进行绘制
- two.update();
- </script>
- </body>
- </html>
复制代码
效果: 2.Two绘制图形 * 圆形 - makeCircle(x, y, radius) * 直线 - makeLine(x1, y1, x2, y2) * 矩形 - makeRectangle(x, y, width, height) * 圆角矩形 - makeRoundedRectangle(x, y, width, height, radius) * 椭圆 - makeEllipse(x, y, width, height) * 多边形 - makePolygon(ox, oy, r, sides) * 路径 - makePath(x1, y1, x2, y2, xN, yN, open) * 星形 - makeStar(ox, oy, or, ir, sides) 3.绘制图形方法 * 基本都返回对应图形对象 * 调用makeCircle()绘制圆形,并返回圆形对象 * 图形对象的属性 * fill - 设置填充样式 * stroke - 设置描边样式 * linewidth - 设置线条宽度 * opacity - 设置透明度 * cap - 设置线条端点形状,默认为"round" * join - 设置线条交点形状,默认为"round" * 图形对象的方法 4.图形分组(Two.Group) * 调用Two对象的makeGroup()方法,进行图形分组 * makeGroup()方法任意图形对象作为参数 * makeGroup()方法返回分组对象 * 统一对分组对象进行样式的设置 * 注意 * 在统一样式设置后,针对不同图形进行个性化样式设置
例如: - <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Two.js库进行图形分组</title>
- <script src="two.js"></script>
- </head>
- <body>
- <div id="d1"></div>
- <script>
- var elem = document.getElementById("d1");
- var two = new Two({
- width : 285,
- height : 200
- }).appendTo(elem);
-
- var circle = two.makeCircle(72, 100, 50);
- var rect = two.makeRectangle(213, 100, 100, 100);
-
- /*
- 将绘制的图形进行分组
- * 调用Two对象的makeGroup()方法,进行图形分组
- * makeGroup()方法返回分组对象
- * 针对这一组进行样式设置
- */
- var group = two.makeGroup(circle,rect);
- /*
- var group = new Two.Group();
- group.add(circle);
- group.add(rect);
- */
-
- group.fill = 'rgb(0,0,0)';
- group.opacity = 0.75;
- group.noStroke();// 设置矩形没有描边
-
- // 针对不同的图形进行个性化样式设置
- circle.stroke = 'yellow';
- circle.linewidth = 10;
-
- two.update();
- </script>
- </body>
- </html>
复制代码
效果: * 提供动画效果(了解) * play()方法 * 提供一组循环动画 * pause()方法 * 提供中止动画效果 * update()方法 * 提供更新当前绘制或设置 例如: - <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Two.js库实现动画效果</title>
- <script src="two.js"></script>
- </head>
- <body>
- <div id="d1"></div>
- <script>
- var elem = document.getElementById("d1");
- var two = new Two({
- width : 285,
- height : 200
- }).appendTo(elem);
- // 设置圆形和矩形
- var circle = two.makeCircle(-70, 0, 50);
- var rect = two.makeRectangle(70, 0, 100, 100);
- // 设置圆形和矩形的样式
- circle.fill = '#FF8000';
- rect.fill = 'rgba(0, 200, 255, 0.75)';
- // 将圆形和矩形分为一组
- var group = two.makeGroup(circle, rect);
- // 针对这一组进行样式设置
- group.translation.set(two.width / 2, two.height / 2);// 将"画布"平移水平和垂直一半距离
- group.scale = 0;// 将圆形和矩形缩放为 0(不显示)
- group.noStroke();// 设置圆形和矩形没有边框
-
- // Two对象绑定update事件(方法)
- two.bind('update', function() {
- // 判断如果缩放为原大小,将缩放和旋转设置为 0
- if (group.scale > 0.9999) {
- group.scale = group.rotation = 0;
- }
- // 每次执行的增量
- var t = (1 - group.scale) * 0.125;
- // 每次执行后缩放值进行累加
- group.scale += t;
- // 每次执行后旋转至进行累加
- group.rotation += t * 4 * Math.PI;
- }).play();// 开始无限循环动画
- </script>
- </body>
- </html>
复制代码
效果:
|