mirror of
https://github.com/Estom/notes.git
synced 2026-02-09 21:36:58 +08:00
651 lines
17 KiB
Markdown
651 lines
17 KiB
Markdown
## 基础内容
|
||
|
||
### 1. 什么是 SVG
|
||
|
||
SVG 全称为 Scalable Vector Graphics，译为可缩放矢量图形,简称矢量图。是一种用来描述二维矢量图形的 XML 标记语言。
|
||
|
||
### 2. SVG与Flash的区别
|
||
|
||
| | SVG | Flash |
|
||
| --- | --- | --- |
|
||
| 相同点 | 用于二维矢量图形 | 用于二维矢量图形 |
|
||
| 不同点 | 是一个开放的W3C标准，基于XML | 封闭的基于二进制格式的 |
|
||
|
||
### 3. SVG与Canvas的区别
|
||
|
||
| SVG | Canvas |
|
||
| --- | --- |
|
||
| 不依赖于分辨率 | 依赖于分辨率 |
|
||
| 使用DOM及事件处理器（DOM专门为SVG开放接口）|不能使用DOM及事件处理器|
|
||
| 不能实现游戏开发 | 可以实现游戏开发 |
|
||
| 实现大型渲染区域的应用(例如百度地图) | 是以图片(png|jpg)存在 |
|
||
|
||
### 4. SVG的优势
|
||
|
||
- 不需要专门的编辑器,文本编辑器都可以
|
||
- 可被搜索、索引、脚本化及压缩
|
||
- 图像不失真(和分辨率无关)
|
||
|
||
**值得注意的是：**
|
||
|
||
- SVG技术并不是专属于HTML5的
|
||
- SVG技术本身是一套独立的用于描述二维图形
|
||
- HTML5版本之前,以图片形式进行引入
|
||
- HTML5版本之后,允许在HTML页面直接使用SVG技术
|
||
|
||
**可参考的资源：**
|
||
|
||
- SVG 标准：[http://www.w3.org/Graphics/SVG/](http://www.w3.org/Graphics/SVG/)
|
||
- SVG 教程：[https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial)
|
||
|
||
### 5. 如何使用 SVG
|
||
|
||
#### 1）SVG 文件（了解）
|
||
|
||
SVG 文件的扩展名为 “.svg”，使用的是 XML 技术的语法内容，并且可以在浏览器中直接运行。
|
||
|
||
```xml
|
||
<?xml version="1.0" encoding="utf-8" ?>
|
||
<!-- SVG的语法标准(必要的) -->
|
||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||
<!-- xmlns="http://www.w3.org/2000/svg" SVG的命名空间 -->
|
||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||
<rect x="100" y="100" width="300" height="100" fill="blue" stroke="black" stroke-width="4"/>
|
||
</svg>
|
||
```
|
||
|
||
也可以在 HTML 页面引入 SVG 文件。
|
||
|
||
```html
|
||
<img src="01_SvgFile.svg" width="800" height="500">
|
||
```
|
||
|
||
#### 2）HTML 直接定义 SVG
|
||
|
||
HTML5 的新特性允许在 HTML 页面中直接定义 SVG 元素（需要学习有关SVG的一些HTML新元素）。
|
||
|
||
**`<svg>`元素：**
|
||
|
||
| | `<svg>`元素 |
|
||
| --- | --- |
|
||
| 作用 | 类似于canvas元素 |
|
||
| 特点 | 默认的宽度和高度分别为300px和150px，不具有任何的样式(默认情况下不显示) |
|
||
| 目的 | 表示当前使用SVG语法内容 |
|
||
|
||
**`<svg>`元素的属性：**
|
||
|
||
| 属性名称 | 描述 |
|
||
| --- | --- |
|
||
| width | 设置 `<svg>` 元素的宽度 |
|
||
| height | 设置 `<svg>` 元素的高度 |
|
||
| style | 设置 `<svg>` 元素的样式 |
|
||
|
||
```html
|
||
<svg width="500" height="300" style="background:pink;">
|
||
<rect x="100" y="100" width="300" height="100" fill="blue" stroke="black" stroke-width="4"/>
|
||
</svg>
|
||
```
|
||
|
||
## 图像元素
|
||
|
||
### 1. 样式
|
||
|
||
| 属性名称 | 描述 |
|
||
| --- | --- |
|
||
| fill | 设置填充样式 |
|
||
| stroke | 设置描边样式 |
|
||
| stroke-width | 设置描边宽度 |
|
||
|
||
### 2. 矩形
|
||
|
||
```html
|
||
<rect x="" y="" rx="" ry="" width="" height="" />
|
||
```
|
||
|
||
| 属性名称 | 描述 |
|
||
| --- | --- |
|
||
| x和y | 表示绘制矩形的左上角坐标值 |
|
||
| width | 表示绘制矩形的宽度 |
|
||
| height | 表示绘制矩形的高度 |
|
||
| rx和ry | 表示绘制矩形的四个角的水平圆角和垂直圆角（如果rx和ry的值分别为width/2和height/2,绘制圆形）|
|
||
|
||
> **值得注意的是：**
|
||
>
|
||
> - 默认绘制出来的效果：实心矩形效果。
|
||
> - 可以实现"空心"的效果：不能实现空心效果。
|
||
|
||
```html
|
||
<svg width="1000" height="600" style="background:pink;">
|
||
<!-- 绘制矩形 -->
|
||
<rect x="10" y="10" width="100" height="100" />
|
||
<rect x="10" y="120" width="100" height="100" fill="white" stroke="black" />
|
||
<rect x="10" y="230" width="100" height="100" rx="10" ry="10" />
|
||
<rect x="10" y="340" width="100" height="100" rx="50" ry="50" style="fill:white;stroke:black;" />
|
||
</svg>
|
||
```
|
||
|
||
### 3. 圆形
|
||
|
||
```html
|
||
<cirlcle cx="" cy="" r="" />
|
||
```
|
||
|
||
| 属性名称 | 描述 |
|
||
| --- | --- |
|
||
| cx和cy | 表示绘制圆形的圆心坐标值 |
|
||
| r | 表示绘制圆形的半径 |
|
||
|
||
```html
|
||
<svg width="1000" height="600" style="background:pink;">
|
||
<!-- 绘制圆形 -->
|
||
<circle cx="170" cy="60" r="50" />
|
||
<circle cx="170" cy="170" r="50" fill="white" stroke="black" />
|
||
</svg>
|
||
```
|
||
|
||
### 4. 椭圆
|
||
|
||
```html
|
||
<ellipse cx="" cy="" rx="" ry="" />
|
||
```
|
||
|
||
| 属性名称 | 描述 |
|
||
| --- | --- |
|
||
| cx和cy | 表示绘制椭圆的圆心坐标值 |
|
||
| rx | 表示绘制椭圆的水平方向半径 |
|
||
| ry | 表示绘制椭圆的垂直方向半径 |
|
||
|
||
```html
|
||
<svg width="1000" height="600" style="background:pink;">
|
||
<!-- 绘制椭圆 -->
|
||
<ellipse cx="280" cy="70" rx="50" ry="60" />
|
||
<ellipse cx="280" cy="190" rx="50" ry="50" />
|
||
<ellipse cx="280" cy="300" rx="50" ry="30" />
|
||
</svg>
|
||
```
|
||
|
||
### 5. 线条
|
||
|
||
```html
|
||
<line x1="" y1="" x2="" y2="" stroke="" />
|
||
```
|
||
|
||
| 属性名称 | 描述 |
|
||
| --- | --- |
|
||
| x1和y1 | 表示绘制直线的起点坐标值 |
|
||
| x2和y2 | 表示绘制直线的终点坐标值 |
|
||
| stroke | 设置绘制直线的样式(颜色) |
|
||
| stroke-width | 设置绘制直线的宽度 |
|
||
|
||
```html
|
||
<svg width="1000" height="600" style="background:pink;">
|
||
<!-- 绘制直线 -->
|
||
<line x1="350" y1="10" x2="500" y2="200" stroke="black" stroke-width="10" />
|
||
</svg>
|
||
```
|
||
|
||
### 6. 折线
|
||
|
||
```html
|
||
<polyline points="" />
|
||
```
|
||
|
||
| 属性名称 | 描述 |
|
||
| --- | --- |
|
||
| points | 表示绘制折线的起点、折点及终点坐标值（格式：x1,y1 x2,y2 x3,y3 xn,yn） |
|
||
| stroke | 设置折线的颜色 |
|
||
| stroke-width | 设置折线的线宽 |
|
||
| fill | 设置与`<svg>`元素的背景色相同 |
|
||
|
||
```html
|
||
<svg width="1000" height="600" style="background:pink;">
|
||
<!-- 绘制折线 -->
|
||
<polyline points="520,20 520,200" stroke="black" stroke-width="10" />
|
||
<polyline points="550,20 550,200 700,200 700,20 540,20" stroke="black" stroke-width="20" fill="pink" />
|
||
</svg>
|
||
```
|
||
|
||
### 7. 多边形
|
||
|
||
```html
|
||
<polygon points="" />
|
||
```
|
||
|
||
| 属性名称 | 描述 |
|
||
| --- | --- |
|
||
| points | 表示绘制多边形的所有点坐标值 |
|
||
|
||
```html
|
||
<svg width="1000" height="600" style="background:pink;">
|
||
<!-- 绘制多边形 -->
|
||
<polygon points="550,300 550,500 800,500" stroke="black" fill="pink" stroke-width="10" />
|
||
</svg>
|
||
```
|
||
|
||
> **值得注意的是：**
|
||
>
|
||
> - 一个HTML页面允许包含多个`<svg>`元素
|
||
> - 一个`<svg>`元素允许包含多个图形元素
|
||
> - SVG的图形元素基本都是起始元素
|
||
> - 定义图形元素时,只定义开始元素,没有结束元素
|
||
> - 浏览器在运行页面时,并不报错
|
||
> - 浏览器解析这段元素代码时,自动补全结束元素
|
||
> - 自动补全的结束元素是不正确的
|
||
|
||
### 8. 渐变
|
||
|
||
#### 1）线性渐变
|
||
|
||
```html
|
||
<linearGradient id="" x1="" y1="" x2="" y2=""></linearGradient>
|
||
```
|
||
|
||
| 属性名称 | 描述 |
|
||
| --- | --- |
|
||
| id | 标识，便于其他元素进行引用 |
|
||
| x1和y1 | 表示基准线的起点坐标值（值范围为 0-1, 是百分值 0%-100%） |
|
||
| x2和y2 | 表示基准线的终点坐标值（值范围为 0-1, 是百分值 0%-100%） |
|
||
|
||
```html
|
||
<stop offset="" stop-color=""/>
|
||
```
|
||
|
||
| 属性名称 | 描述 |
|
||
| --- | --- |
|
||
| offset | 表示设置渐变颜色的位置 |
|
||
| stop-color | 表示设置的渐变颜色 |
|
||
| stop-opacity | 表示设置渐变颜色的透明度 |
|
||
|
||
```html
|
||
<svg width="800" height="500">
|
||
<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.5" />
|
||
<stop offset="1" stop-color="blue" stop-opacity="0.5" />
|
||
</linearGradient>
|
||
</defs>
|
||
<rect x="0" y="0" width="200" height="200" fill="url(#grd)" />
|
||
<circle cx="400" cy="400" r="100" fill="url(#grd)" />
|
||
</svg>
|
||
```
|
||
|
||
#### 2）射线渐变
|
||
|
||
```html
|
||
<radialGradient id="" cx="" cy="" r="" fx="" fy=""></radialGradient>
|
||
```
|
||
|
||
| 属性名称 | 描述 |
|
||
| --- | --- |
|
||
| id | 标识，便于其他元素进行引用 |
|
||
| cx和cy | 表示基准线中的中心点坐标值（值范围为 0-1, 是百分值 0%-100%） |
|
||
| fx和fy | 表示基准线中的焦点坐标值（值范围为 0-1, 是百分值 0%-100%） |
|
||
| r | 设置其边缘位置（值范围为 0-1, 是百分值 0%-100%） |
|
||
|
||
```html
|
||
<stop offset="" stop-color=""/>
|
||
```
|
||
|
||
| 属性名称 | 描述 |
|
||
| --- | --- |
|
||
| offset | 表示设置渐变颜色的位置 |
|
||
| stop-color | 表示设置的渐变颜色 |
|
||
| stop-opacity | 表示设置渐变颜色的透明度 |
|
||
|
||
```html
|
||
<svg width="800" height="500">
|
||
<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>
|
||
```
|
||
|
||
> **值得注意的是：**
|
||
>
|
||
> - 渐变元素需要定义id属性,便于其他元素进行引用
|
||
> - 渐变元素定义在<defs>元素内
|
||
> - <defs>元素内定义：表示该元素允许重复使用
|
||
|
||
### 9. 滤镜
|
||
|
||
```html
|
||
<filter id="myfilter"></filter>
|
||
```
|
||
|
||
**值得注意的是：**该元素只是滤镜的容器。
|
||
|
||
#### 高斯模糊
|
||
|
||
```html
|
||
<feGaussianBlur in="" stdDeviation="" />
|
||
```
|
||
|
||
| 属性名称 | 描述 |
|
||
| --- | --- |
|
||
| in | 设置高斯模糊的样式 |
|
||
| stdDeviation | 设置模糊的程度 |
|
||
|
||
```html
|
||
<svg width="800" height="500">
|
||
<defs>
|
||
<filter id="myfilter">
|
||
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
|
||
</filter>
|
||
</defs>
|
||
<rect x="100" y="100" width="100" height="100" filter="url(#myfilter)" />
|
||
</svg>
|
||
```
|
||
|
||
## Two.js库
|
||
|
||
### 1. 基础内容
|
||
|
||
Two.js支持不同的上下文环境：
|
||
|
||
- SVG（默认）
|
||
- Canvas
|
||
- WebGL
|
||
|
||
官网地址：[http://jonobr1.github.io/two.js/](http://jonobr1.github.io/two.js/)
|
||
|
||
#### 如何使用 Two.js
|
||
|
||
##### 1）HTML 页面
|
||
|
||
* 引入Two.js库文件
|
||
* 定义容器元素 `<div></div>`
|
||
|
||
```html
|
||
<!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>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
##### 2）JavaScript逻辑
|
||
|
||
* 获取HTML页面的容器元素
|
||
* 通过 Two.js 库提供的 Two() 构造函数创建 Two 对象
|
||
|
||
```javascript
|
||
var params = {// 创建svg时初始化的数据
|
||
width : 宽度,
|
||
height : 高度
|
||
}
|
||
var two = new Two(params);
|
||
```
|
||
|
||
* 将创建的 Two 对象添加到 HTML 页面容器元素内
|
||
|
||
```javascript
|
||
two.appendTo(elem);
|
||
```
|
||
|
||
* 使用 Two.js 库提供的 API 方法绘制图形
|
||
* 调用 update() 方法进行绘制
|
||
|
||
```html
|
||
<!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的
|
||
*/
|
||
two.appendTo(elem);
|
||
// 6. 通过调用Two对象提供的API方法进行绘制
|
||
var circle = two.makeCircle(72, 100, 50);
|
||
var rect = two.makeRectangle(213, 100, 100, 100);
|
||
// 7. 调用update()方法进行绘制
|
||
two.update();
|
||
</script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
### 2. 绘制图像
|
||
|
||
#### 1）绘制图像的方法
|
||
|
||
| 图像形状 | 方法 |
|
||
| --- | --- |
|
||
| 圆形 | `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)` |
|
||
|
||
#### 2）绘制图像的属性
|
||
|
||
| 属性名称 | 描述 |
|
||
| --- | --- |
|
||
| fill | 设置填充样式 |
|
||
| stroke | 设置描边样式 |
|
||
| linewidth | 设置线条宽度 |
|
||
| opacity | 设置透明度 |
|
||
| cap | 设置线条端点形状，默认为`round` |
|
||
| join | 设置线条交点形状，默认为`round` |
|
||
|
||
```html
|
||
<!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 params = {
|
||
type : Two.Types.canvas,
|
||
width : 285, // 默认为640px
|
||
height : 200 // 默认为480px
|
||
};
|
||
var two = new Two(params);
|
||
|
||
two.appendTo(elem);
|
||
|
||
var circle = two.makeCircle(72, 100, 50);
|
||
var rect = two.makeRectangle(213, 100, 100, 100);
|
||
// 设置绘制的圆形和矩形的样式
|
||
circle.fill = '#FF8000';
|
||
circle.stroke = 'orangered';
|
||
circle.linewidth = 5;
|
||
|
||
rect.fill = 'rgb(0, 200, 255)';
|
||
rect.opacity = 0.75;
|
||
rect.noStroke();// 设置矩形没有描边
|
||
|
||
two.update();
|
||
</script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
### 3. 图像分组
|
||
|
||
调用 Two 对象的 makeGroup() 方法对图像进行分组操作。
|
||
|
||
- makeGroup() 方法任意图形对象作为参数
|
||
- makeGroup() 方法返回分组对象
|
||
|
||
> **值得注意的是：**在统一对一组图像设置后,针对不同图像进行个性化设置。
|
||
|
||
```html
|
||
<!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);
|
||
|
||
var group = two.makeGroup(circle,rect);
|
||
|
||
group.fill = 'rgb(0, 200, 255)';
|
||
group.opacity = 0.75;
|
||
group.noStroke();// 设置矩形没有描边
|
||
|
||
// 针对不同的图形进行个性化样式设置
|
||
circle.stroke = 'orangered';
|
||
circle.linewidth = 5;
|
||
|
||
two.update();
|
||
</script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
### 4. 动画效果（了解）
|
||
|
||
| 方法名称 | 描述 |
|
||
| --- | --- |
|
||
| play() | 提供一组循环动画 |
|
||
| pause() | 提供中止动画效果 |
|
||
| update() | 提供更新当前绘制或设置 |
|
||
|
||
```html
|
||
<!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(frameCount) {
|
||
// 判断如果缩放为原大小,将缩放和旋转设置为 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>
|
||
``` |