动画和渐变

1.动画

svg绘图时，每个图形都是以DOM节点的形式插入到页面中的，我们可以通过js来直接操作这些图形。

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto  弯曲
S = smooth curveto   平滑曲线
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc  椭圆弧
Z = closepath  闭合路径

SVG 是一种图件格式，因此可以使用与其他图像类型相同的方式包含在 HTML 页面中。具体可以采用两种方法：将图像包含在 <img> 元素内（当图像是页面的基本组成部分时，推荐这种方式）；或者将图像作为另一个元素的 CSS 样式属性插入(当图像主要用来装饰时，推荐这种方式)。

在 <img> 元素内包含 SVG

在 <img> 元素内包含 SVG 图像非常简单，只需设置 src 指向 SVG 文件位置即可。
<img src:"xxx.svg">       

  

                         

 使图像沿着路径移动

 svg常用动画属性

begin：“click”让动画点击移动

repeatCount="indefinite"动画循环播放

（2）  绘制圆形用circle还可以用rect标签结合援交的值实现原型或椭圆形的绘制

            cx圆形的中心点x轴坐标

            cy圆形的中心点y轴坐标

            r圆形的半径

            styoke-opacity设置线条的透明度

             fill-opacity 设置透明度

2.渐变

用canvas达到渐变效果

var linear = can.createLinearGradient(50, 50, 100, 150);

创建个矩形

 linear.addColorStop(0.5, "red");

设置渐变开始和颜色

        linear.addColorStop(1, "green");

渐变结束和颜色

 can.fillRect(50, 50, 200, 100);

颜色填充和位置

 出来是这个样子

dur="0.01"

这个是动画时间

越短动画越快