canvas与svg的区别，以及由此出现的插件

canvas与svg的区别

首先canvas是HTML5中的新元素，通过Javascript来绘制二维图形。而SVG不是HTML5中的新元素，它是xml中绘制二维图形的语言，因此，它们两之间存在很大的区别。Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。canvas是一个画布，它绘制出来的图形是标量图，它可以引入普通图片，也可以绘制一些数据类的统计图，柱形图等。SVG绘制出来的图形是矢量图，它不能引入普通的图片，所以矢量图不会失真的原因，它绘制的图形清晰，明亮，可以做一些动态图形，所以，百度地图绘制图形大部分是用的SVG。因此，就出现了许多的脚本语音(插件)，例如：two.js,three.js,chart.js。

chart.js

首先Chart.js是画各种图表的一款前端工具，chart.js有中文文档与英文文档
中文文档链接：http://chartjs.cn/
英文文档链接：https://www.chartjs.org/(比较安全)

点击你想要的链接进入Chart.js官网，下载Chart.js，并且引用。如果不下载可以在有网的情况下直接引用。

<script src="https://cdn.bootcss.com/Chart.js/3.0.0-alpha/Chart.js"></script>

然后点开文档，获取自己想要的图形代码格式。
绘制一个扇形图

<script>
         // 设置参数
            var data = {
                labels: [
                "Red",
                "Blue",
                "Yellow"
                        ],//x轴的说明文字
            datasets: [
                {
                    data: [300, 50, 100],//数据
                    backgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ],//颜色
                    hoverBackgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ]
                    }]//hover效果的颜色
        };
      var ctx = document.getElementById('c1').getContext('2d');
      var myBarChart = new Chart(ctx, {
                                                    type: 'pie',//图形类型
                                                    data: data,
               });
</script>

Two.js

Two.js 是一个 2D 绘图 API ，它和 svg、canvas、webgl 相同的 API 绘制渲染器。它是平面运动图形，目的是使创作和动画的平面形状更容易和更简洁。它1不支持文本或图像。核心 two.js 依赖于scenegraph。当你绘制或创建对象 （ Two.Polygon或Two.Group），两个实际上存储。它有一个内置的动画循环。可以自动化与另一个动画库配对。

文档链接：https://two.js.org/ 点击链接进去官网下载two.js并可以学习。
绘制太阳自转地球公转

首先创建容器

<div id="container"></div>

设置样式

<style>
    div{
       text-align: center;
    }
    svg {
      background: #222;
    }
  </style>

引入two.js

<script src="js/two.js"></script>//这里是自己下载的two.js

编写代码

<script>
   var two = new Two({width:600, height: 600}).appendTo(container);//动态创建svg
   var sun = two.makeCircle(0,0,100);//绘制太阳
   sun.fill = 'red';
   sun.stroke = 'transparent';
   var sunOrbit = two.makeCircle(0,0,200);
   sunOrbit.fill = 'transparent';
   sunOrbit.stroke = '#ccc';

   var earth = two.makeCircle(200, 0, 30);//绘制地球
   earth.fill = 'blue';
   earth.stroke = 'transparent';
   var earthOrbit = two.makeCircle(200, 0, 50);
   earthOrbit.fill = 'transparent';
   earthOrbit.stroke = '#ccc';
   var moon = two.makeCircle(50,0, 5);//绘制月亮
   moon.fill = 'gold';
   moon.stroke = 'transparent';
   moon.rotation = 0;
   var moonGroup = two.makeGroup(moon);
   moonGroup.translation.set(200,0);

   var earthGroup = two.makeGroup(earth,earthOrbit,moonGroup);

   var sunGroup = two.makeGroup(sun,sunOrbit,earthGroup);
   sunGroup.translation.set(two.width/2, two.height/2);

   two.bind('update', function(){
     moonGroup.rotation += 10*Math.PI/180;
     moonGroup.rotation %= 2*Math.PI;
     earthGroup.rotation += 2*Math.PI/180;
     earthGroup.rotation %= 2*Math.PI;
   })
   two.play();
 </script>