canvas 笔记整理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <h2>绘制多角形</h2>
        <canvas id="canvas_1" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">
            当前浏览器不支持 canvas
        </canvas>
    </div>
</body>
<script type="text/javascript">
    /*
        该方法用于绘制多角形
            n：该参数通常设置为奇数，控制绘制 N 角星
            dx、dy：控制 N 角星的位置
            size：控制 N 角星的大小
    */
    function creatStar(context, n, dx, dy, size){
        // 开始创建路径
        context.beginPath();
        var dig = Math.PI / n * 4;
        context.moveTo(dx, y + dy);
        for(var i = 0; i <= n; i++){
            var x = Math.sin(i * dig);
            var y = Math.cos(i * dig);
            // 绘制从当前点连接到指定点的线条
            context.lineTo(x * size + dx, y * size + dy);
        }
        // 关闭路径
        context.closePath();
    }

    // 获取 canvas 元素对应的 DOM 对象
    var canvas_1 = document.getElementById("canvas_1");

    // 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
    var ctx = canvas_1.getContext("2d");

    // 绘制三角星
    creatStar(ctx, 3, 60, 60, 50);
    ctx.fillStyle = '#f00';
    ctx.fill();
    // 绘制五角星
    creatStar(ctx, 5, 160, 60, 50);
    ctx.fillStyle = '#0f0';
    ctx.fill();
    // 绘制七角星
    creatStar(ctx, 7, 260, 60, 50);
    ctx.fillStyle = '#00f';
    ctx.fill();
    // 绘制九角星
    creatStar(ctx, 9, 360, 60, 50);
    ctx.fillStyle = '#f0f';
    ctx.fill();
</script>
</html>
--------------------- 
作者：MR_LP 
来源：CSDN 
原文：https://blog.csdn.net/MR_LP/article/details/51919800?utm_source=copy 
版权声明：本文为博主原创文章，转载请附上博文链接！

　　多边形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <h2>绘制花朵</h2>
        <canvas id="canvas_1" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">
            当前浏览器不支持 canvas
        </canvas>
    </div>
</body>
<script type="text/javascript">
    /*
        该方法负责绘制花朵
            n：该参数控制花朵的花瓣数
            dx,dy：控制花朵的位置
            size：控制花朵的大小
            length：控制花瓣的长度
    */
    function creatFlower(context, n, dx, dy, size, length){
        // 开始创建路径
        context.beginPath();
        context.moveTo(dx, dy + size);
        var dig = 2 * Math.PI / n;
        for(var i = 1; i < n + 1; i++){
            // 计算控制点的坐标
            var ctrlX = Math.sin((i - 0.5) * dig) * length + dx;
            var ctrlY = Math.cos((i - 0.5) * dig) * length + dy;
            // 计算结束点的坐标
            var x = Math.sin(i * dig) * size + dx;
            var y = Math.cos(i * dig) * size + dy;
            // 绘制二次曲线
            context.quadraticCurveTo(ctrlX, ctrlY, x, y);
        }
        context.closePath();
    }
    // 获取 canvas 元素对应的 DOM 对象
    var canvas_1 = document.getElementById("canvas_1");
    // 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
    var ctx = canvas_1.getContext("2d");
    // 绘制五瓣的花朵
    creatFlower(ctx, 5, 70, 100, 30, 80);
    ctx.fillStyle = "#f00";
    ctx.fill();
    // 绘制六瓣的花朵
    creatFlower(ctx, 6, 220, 100, 30, 80);
    ctx.fillStyle = "#ff0";
    ctx.fill();
    // 绘制七瓣的花朵
    creatFlower(ctx, 7, 370, 100, 30, 80);
    ctx.fillStyle = "#f0f";
    ctx.fill();
</script>
</html>
--------------------- 
作者：MR_LP 
来源：CSDN 
原文：https://blog.csdn.net/MR_LP/article/details/51919800?utm_source=copy 
版权声明：本文为博主原创文章，转载请附上博文链接！

雷达图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    canvas{
    }
  </style>
</head>
<body>
<script type="text/javascript"> 
    var mW = 400;
    var mH = 400;
    var mData = [['速度', 77],
                            ['力量', 72],
                            ['防守', 46],
                            ['射门', 50],
                            ['传球', 80],
                            ['耐力', 60]];
    var mCount = mData.length; //边数 
    var mCenter = mW /2; //中心点
    var mRadius = mCenter - 50; //半径(减去的值用于给绘制的文本留空间)
    var mAngle = Math.PI * 2 / mCount; //角度
    var mCtx = null;
    var mColorPolygon = '#B8B8B8'; //多边形颜色
    var mColorLines = '#B8B8B8'; //顶点连线颜色
    var mColorText = '#000000';

    //初始化
    (function(){
      var canvas = document.createElement('canvas');
      document.body.appendChild(canvas);
      canvas.height = mH;
      canvas.width = mW;
      mCtx = canvas.getContext('2d');

      drawPolygon(mCtx);
      drawLines(mCtx);
      drawText(mCtx);
      drawRegion(mCtx);
      drawCircle(mCtx);
    })();

      // 绘制多边形边
      function drawPolygon(ctx){
        ctx.save();

        ctx.strokeStyle = mColorPolygon;
        var r = mRadius/ mCount; //单位半径
        //画6个圈
        for(var i = 0; i < mCount; i ++){
            ctx.beginPath();        
            var currR = r * ( i + 1); //当前半径
            //画6条边
            for(var j = 0; j < mCount; j ++){
                var x = mCenter + currR * Math.cos(mAngle * j);
                var y = mCenter + currR * Math.sin(mAngle * j);

                ctx.lineTo(x, y);
            }
            ctx.closePath()
            ctx.stroke();
        }

        ctx.restore();
      }

    //顶点连线
    function drawLines(ctx){
        ctx.save();

        ctx.beginPath();
        ctx.strokeStyle = mColorLines;

        for(var i = 0; i < mCount; i ++){
            var x = mCenter + mRadius * Math.cos(mAngle * i);
            var y = mCenter + mRadius * Math.sin(mAngle * i);

            ctx.moveTo(mCenter, mCenter);
            ctx.lineTo(x, y);
        }

        ctx.stroke();

        ctx.restore();
    }

    //绘制文本
    function drawText(ctx){
        ctx.save();

        var fontSize = mCenter / 12;
        ctx.font = fontSize + 'px Microsoft Yahei';
        ctx.fillStyle = mColorText;

        for(var i = 0; i < mCount; i ++){
            var x = mCenter + mRadius * Math.cos(mAngle * i);
            var y = mCenter + mRadius * Math.sin(mAngle * i);

            if( mAngle * i >= 0 && mAngle * i <= Math.PI / 2 ){
                ctx.fillText(mData[i][0], x, y + fontSize); 
            }else if(mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI){
                ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y + fontSize);    
            }else if(mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2){
                ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);   
            }else{
                ctx.fillText(mData[i][0], x, y);
            }

        }

        ctx.restore();
    }

    //绘制数据区域
    function drawRegion(ctx){
        ctx.save();

        ctx.beginPath();
        for(var i = 0; i < mCount; i ++){
            var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
            var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

            ctx.lineTo(x, y);
        }
        ctx.closePath();
        ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
        ctx.fill();

        ctx.restore();
    }

    //画点
    function drawCircle(ctx){
        ctx.save();

        var r = mCenter / 18;
        for(var i = 0; i < mCount; i ++){
            var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
            var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;

            ctx.beginPath();            
            ctx.arc(x, y, r, 0, Math.PI * 2);
            ctx.fillStyle = 'rgba(255, 0, 0, 0.8)';
            ctx.fill();
        }       

        ctx.restore();
    }
</script>

</body>
</html>
--------------------- 
作者：王乐平 
来源：CSDN 
原文：https://blog.csdn.net/lecepin/article/details/60466711?utm_source=copy 
版权声明：本文为博主原创文章，转载请附上博文链接！

基础图标

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
</head>


   <body>
      <canvas id="bar" width="450" height="250">
      </canvas>
      <canvas id="pie" width="450" height="250"></canvas>
      <br />
      <canvas id="line" width="450" height="250"></canvas>
      <canvas id="curve" width="450" height="250"></canvas>


<script>
window.onload = function() {

   var bar = document.getElementById("bar"),
      data = {
         label: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],//x轴的标题
         dataSets: [{
            bDistance: 30, //绘制的边框距离画布边框的距离
            bInterval: 20, //两个柱状图之间的距离
            values: [300, 50, 100, 50, 80, 150, 120], //对应标签的值
            fillColor: "rgba(0,0,255,0.5)" //矩形填充颜色
         }, {
            txtfont: "14px microsoft yahei",//绘制文本的字体
            txtalgin: "center",//文本对齐方式
            txtbaseline: "middle"//文本的基线
         }, {
            fillColor: "black", //矩形填充颜色
            xtitle: "订单总数（个）", //x轴标题
            ytitle: "星期几" //y轴标题
         }]
      };
   barChart(bar, data); //画柱状图




   var pie = document.getElementById("pie"),
      datasets = {
         colors: ["blue", "yellow", "black", "red", "green"], //颜色
         labels: ["第一周", "第二周", "第三周", "第四周", "第五周"], //标签
         values: [30, 60, 80, 70, 150], //值
         x: 125, //圆心x坐标
         y: 125, //圆心y坐标
         radius: 100 //半径
      };
   pieChart(pie, datasets); //画饼状图



   var line = document.getElementById("line"),
      datas = {
         labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],//标签
         values: [50, 180, 100, 150, 110, 130, 30],//值
         txtSet: {//绘制文本设置
            txtfont: "14px microsoft yahei",
            txtalgin: "center",
            txtbaseline: "middle",
            txtColor:"#000000"
         },
         bgSet:{//绘制背景线设置
            lineColor:"#C0C0C0",
            lineWidth:1,

         },
         lineColor:"#000000",//折线颜色
         circleColor:"blue",//折线上原点颜色
         yAxis:{//y轴表示什么，及绘制文本的位置
            x:50,
            y:11,
            title:"完成件数（个）"
         }
      },
      newData = {
         labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
         values: [100, 40, 200, 50, 10, 80, 100],
         txtSet: {
            txtfont: "14px microsoft yahei",
            txtalgin: "center",
            txtbaseline: "middle",
            txtColor:"#000000"
         },
         bgSet:{
            lineColor:"#C0C0C0",
            lineWidth:1,
         },
         lineColor:"blue",
         circleColor:"red",
         yAxis:{
            x:50,
            y:11,
            title:"完成件数（个）"
         }
      };
   lineChart(line,datas);//画折线图
   //lineChart(line,newData);//在同一个canvas画第二条折线图
   //curveChart();//绘制曲线




   var bg = document.getElementById("curve")
   linedata = {
      labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],//标签
      datas: [115, 35, 210, 100, 300, 220, 40],//数据
      xTitle: "月份",//x轴标题
      yTitle: "产量(个)",//y轴标题
      ctxSets:{
         strokeColor:"#C0C0C0",//背景线颜色
         lineWidth:1,//线的宽度
         txtColor:"#000000",//绘制文本颜色
         txtFont:"12px microsoft yahei",//字体
         txtAlign:"center",//对齐方式
         txtBase:"middle",//基线
         lineColor:"blue",//折线颜色
         circleColor:"#FF0000"//折线上圆点颜色
      }
   };
   setBg(bg,linedata);//绘制图标背景及折线
}


//数组sort()排序传的参数为该函数（降序排列），绘制柱状图需要
function compare(value1, value2) {
      return value2 - value1;
   }
/*柱状图
 * elem:要操作的画布元素
 * data:所需格式的数据*/
function barChart(elem, data) {
      if (elem.getContext) {
         var ctx = elem.getContext("2d"),
            mywidth = elem.width, //画布的宽高
            myheight = elem.height,
            bDistance = parseInt(data.dataSets[0].bDistance), //图标边框到画布间距
            bInterval = data.dataSets[0].bInterval, //矩形间间距
            labels = data.label, //矩形对应标题
            len = labels.length,//标签/数据个数
            //矩形宽度
            bWidth = Math.floor((mywidth - bDistance * 2 - (len + 1) * bInterval) / len),
            bheight = myheight - bDistance * 2, //边框高度
            values = data.dataSets[0].values, //绘图的值
            sortValues = values.slice(0), //基于当前数组中的一个或多个项创建一个新数组（解决了该数组排序原数组也被排序的问题）
            serialValues = new Array(); //用于存储序列化后的值
         sortValues.sort(compare);
         if (sortValues[0] > bheight) {
            (function() {
               //数值超过边框高度时序列化值
               for (var i = 0; i < len; i++) {
                  serialValues[i] = values[i] * bheight / sortValues[0];
               }
            })(); //块级作用域
         }
         //绘制边框
         ctx.beginPath(); //要绘制路径，必须先调用该方法，表示开始绘制新路径
         ctx.moveTo(bDistance, bDistance);
         ctx.lineTo(bDistance, myheight - bDistance);
         ctx.lineTo(mywidth - bDistance, myheight - bDistance);
         ctx.stroke(); //把图形绘制到画布上
         //绘制矩形，组成条形图
         ctx.fillStyle = data.dataSets[0].fillColor;
         //绘制文字
         ctx.font = data.dataSets[1].txtfont; //字体样式、大小、字体
         ctx.textAlign = data.dataSets[1].txtalgin; //文本对齐方式
         ctx.textBaseline = data.dataSets[1].txtbaseline; //文本的基线
         for (var i = 0; i < len; i++) {
            var x = (bInterval + bDistance) + i * (bWidth + bInterval),
               y = myheight - serialValues[i] - bDistance,
               x1 = x + Math.round(bWidth / 2);
            y1 = myheight - bDistance + 15,
               y2 = y - 10;
            ctx.fillRect(x, y, bWidth, serialValues[i]); //x,y,width,height单位都为px
            ctx.fillText(labels[i], x1, y1); //绘制标题文字
            ctx.fillText(values[i], x1, y2); //绘制柱状图数据
         }
         ctx.fillStyle = data.dataSets[2].fillColor;
         ctx.fillText(data.dataSets[2].xtitle, 49, 7); //x轴代表什么
         ctx.fillText(data.dataSets[2].ytitle, mywidth - bDistance, myheight - bDistance + 15); //y轴代表什么
      }
   }
   //求和，计算百分比（画饼图时需要）

function sumFunc(data) {
      var sum = 0;
      for (var i = 0, len = data.length; i < len; i++) {
         sum += data[i];
      }
      return sum;
   }
/*饼图
 * elem:要操作的画布元素
 * data:所需格式的数据*/

function pieChart(elem, data) {
   if (elem.getContext) {
      var ctx = elem.getContext("2d"),
         vdata = data.values, //绘图数据
         sum = sumFunc(vdata), //对绘图数据求和，用于计算百分比
         startangle = 0, //绘制扇形的开始角度
         labels = data.labels, //绘图的对应文字
         x = data.x, //圆心x坐标
         y = data.y, //圆心y坐标
         rad = data.radius, //圆半径
         x1 = x + rad + 30, //绘制右侧文字和标注的x坐标
         y1 = y - rad, //绘制右侧文字和标注的y坐标
         endangle; //绘制扇形的结束角度
      for (var i = 0, len = vdata.length; i < len; i++) {
         //绘制饼图
         //计算下一次绘制扇形的结束角度，即根据绘制数据占有总数据和的比例求的弧度
         var percent = vdata[i] / sum;
         endangle = startangle + Math.PI * 2 * (percent);
         ctx.beginPath(); //开始绘制新路径
         ctx.fillStyle = data.colors[i]; //绘制颜色
         ctx.moveTo(x, y); //移动到圆心(注：画饼图一定要回到圆心，不然会有问题)
         ctx.arc(x, y, rad, startangle, endangle, false); //画扇形
         //绘制右侧文字和标注
         ctx.moveTo(x1, y1); //移动到绘制文字和标注的位置
         ctx.fillRect(x1, y1, 30, 14); //绘制矩形表示比列图
         //计算四舍五入后的扇形每份的百分比
         var perc = (percent * 100).toFixed(2) + "%"; //tofixed()自动四舍五入返回指定小数位数的字符串
         //设置绘制文字的属性
         ctx.font = "bold 12px microsoft yahei";
         ctx.txtalgin = "center";
         ctx.textBaseline = "top";
         //绘制文字
         ctx.fillText(labels[i] + ":" + perc, x1 + 35, y1);
         ctx.fill(); //指定颜色填充以上绘制
         startangle = endangle; //下一次绘制扇形的开始角度
         y1 += 20; //下一次绘制文字和标注的y坐标
      }
   }
}
/*绘制折线
 elem:操作的元素
 data：所需格式数据*/
function lineChart(elem, data) {
   if (elem.getContext) {
      var ctx = elem.getContext("2d"),
         labels = data.labels,//数值对应标签
         values = data.values,//数值
         len = labels.length,//标签/数值个数
         elemWidth = elem.width,//画布宽度
         elemHeight = elem.height,//画布高度
         gridHeight = Math.ceil(elemHeight / 5),//每行之间高度
         gridWidth = Math.floor(elemWidth / len),//每列之间看度
         actualHeight = 4 * gridHeight + 20;//绘制区域实际高度
      //设置绘制直线的属性
      ctx.strokeStyle = data.bgSet.lineColor;
      ctx.lineWidth = data.bgSet.lineWidth;
      //设置绘制文本的属性
      ctx.font = data.txtSet.txtfont;
      ctx.textAlign = data.txtSet.txtalgin;
      ctx.txtbaseline = data.txtSet.txtbaseline;
      //绘制背景
      //绘制背景横线
      ctx.beginPath();
      for (var i = 0; i < 5; i++) {
         var hgridY = gridHeight * i + 20,
            hgridX = gridWidth * len;
         ctx.moveTo(0, hgridY);
         ctx.lineTo(hgridX, hgridY);
      }
      ctx.stroke();

      //绘制背景的竖线，表示每个label
      ctx.beginPath();
      for (var j = 0; j < len + 1; j++) {
         var vgridX = gridWidth * j,
            vgridY = actualHeight;
         ctx.moveTo(vgridX, vgridY);
         ctx.lineTo(vgridX, vgridY + 10);
      }
      ctx.stroke();
      //绘制标签文字
      ctx.fillStyle = data.txtSet.txtColor;
      for (var k = 0; k < len; k++) {
         var txtX = gridWidth * (k + 0.5),
            txtY = actualHeight + 15;
         ctx.fillText(labels[k], txtX, txtY);
      }
      ctx.fill();


      //获取画图数据的最大值用于序列换数据
      var maxValue = 0,
         cData = new Array();
      for (var i = 0; i < len; i++) {
         if (values[i] > maxValue) {
            maxValue = values[i];
         }
      }
      //当最大值大于画布可绘制区域的高度时，对数据进行转化，然后进行画图
      if ((4 * gridHeight) < maxValue) {
         for (var i = 0; i < len; i++) {
            //转换后的数据
            cData[i] = values[i] * 4 * gridHeight / maxValue;
         }
      } else {
         cData = values;
      }
      //绘制折线
      ctx.strokeStyle = data.lineColor;
      ctx.beginPath();
      var pointX = gridWidth / 2,
         pointY = actualHeight - cData[0];
      ctx.moveTo(pointX, pointY);
      for (var i = 1; i < len; i++) {
         pointX += gridWidth;
         pointY = actualHeight - cData[i];
         ctx.lineTo(pointX, pointY);
      }
      ctx.stroke();
      //绘制坐标圆形
      ctx.beginPath();
      ctx.fillStyle = data.circleColor; //圆点的颜色
      for (var i = 0; i < len; i++) {
         var circleX = gridWidth / 2 + gridWidth * i,
            circleY = actualHeight - cData[i];
         ctx.moveTo(circleX, circleY); //假如不每次绘制之前确定开始绘制新路径，可以每次绘制之前移动到新的圆心
         ctx.arc(circleX, circleY, 4, 0, Math.PI * 2, false);
      }
      ctx.fill();
      //绘制坐标圆形对应的值
      ctx.beginPath();
      ctx.fillStyle = data.txtSet.txtColor;; //文本颜色
      for (var i = 0; i < len; i++) {
         var circleX = gridWidth / 2 + gridWidth * i,
            circleY = actualHeight - cData[i];
         ctx.fillText(values[i], circleX, circleY - 8);

      }
      ctx.fill();
      //绘制y轴代表什么
      ctx.fillText(data.yAxis.title, data.yAxis.x, data.yAxis.y);
      ctx.fill();

   }
}

function curveChart() {
      var elem = document.getElementById("curve");
      if (elem.getContext) {
         var ctx = elem.getContext("2d");
         //       ctx.lineWidth = 2;
         ctx.lineCap = "square";
         ctx.beginPath();
         ctx.moveTo(100, 70);
         ctx.bezierCurveTo(120, 150, 150, 150, 200, 60); //三次贝赛尔曲线
         ctx.moveTo(40, 100);
         ctx.quadraticCurveTo(60, 60, 100, 70); //二次贝塞尔曲线
         ctx.moveTo(200, 60);
         ctx.arcTo(240, 40, 300, 50, 50); //绘制弧线
         ctx.stroke();

      }
   }
   /* 绘制背景
    * elem:要操作的元素
    * data:所需格式的数据*/


function setBg(elem, data) {

   if (elem.getContext) {
      var ctx = elem.getContext("2d"),//获取元素上下文
         startX = 40,//左上角开始绘制的x坐标
         startY = 40,//左上角开始绘制的y坐标
         labels = data.labels,//对应数据的标签，即列数
         cols = labels.length,//数据个数
         datas = data.datas,//数据
         gWidth = elem.width - 80,//背景总宽度,elem.width为画布宽度
         gHeight = elem.height - 80,//背景总长度
         pgWidth = gWidth / cols,//背景每个格的宽度
         rows = 10,//背景表格行数
         pgHeight = gHeight / rows;//背景表格高度


      //绘制背景
      ctx.beginPath(); //开始绘制新路径
      ctx.strokeStyle = data.ctxSets.strokeColor;//描边颜色
      ctx.lineWidth = data.ctxSets.lineWidth;//描边线条宽度
      //绘制横线
      for (var i = 0; i < rows; i++) {
         var pY = startX + pgHeight * i;
         ctx.moveTo(startX, pY); //移动到绘制的起点
         ctx.lineTo(gWidth + startX, pY);
      }
      //最后一根横线
      var pY1 = startY + pgHeight * rows;
      ctx.moveTo(startX, pY1); //移动到绘制的起点
      ctx.lineTo(gWidth + startX + 20, pY1);
      //绘制竖线
      //第一根竖线
      ctx.moveTo(startX, startY - 20); //移动到绘制的起点
      ctx.lineTo(startX, gHeight + startY + 10);
      for (var i = 1; i < cols + 1; i++) {
         var pX = startX + pgWidth * i;
         ctx.moveTo(pX, startY); //移动到绘制的起点
         ctx.lineTo(pX, gHeight + startY + 10);
      }

      ctx.stroke();//把图形绘制到画布上
      //绘制文字
      ctx.fillStyle = data.ctxSets.txtColor;//填充颜色
      ctx.font = data.ctxSets.txtFont;//文本字体
      ctx.textAlign = data.ctxSets.txtAlign;//文本对齐方式
      ctx.textBaseline = data.ctxSets.txtBase;//文本基线
      //绘制横轴文字
      for (var i = 0; i < cols; i++) {
         var px = startX + pgWidth / 2 + pgWidth * i;
         ctx.fillText(labels[i], px, startY + gHeight + 10);
      }
      //绘制竖轴文字
      //判断最大值是否大于行高，确定每行的数值
      var maxValue = 0,
         newValues = new Array(),
         j = 0;
      for (var i = 0; i < cols; i++) {
         if (datas[i] > maxValue) {
            maxValue = datas[i];
         }
      }
      //重新计算每隔数据值及转换值
      if (maxValue > gHeight) {
         pgValues = maxValue / rows;
         for (var i = 0; i < cols; i++) {
            newValues[i] = datas[i] * gHeight / maxValue;
         }
      } else {
         pgValues = pgHeight;
         newValues = datas;
      }
      //绘制竖轴文字
      for (var i = rows; i >= 0; i--) {
         ctx.fillText(pgValues * i, 20, startY + pgHeight * j);
         j++;
      }

      //绘制标题
      //x轴标题
      ctx.fillText(data.xTitle, gWidth + startX + 15, gHeight + startY + 10);
      //y轴标题
      ctx.fillText(data.yTitle, startX + 25, startY - 10);


      //画图
      //绘制折线
      ctx.strokeStyle = data.ctxSets.lineColor;;
      ctx.beginPath();
      var pointX = pgWidth / 2 + startX,
         pointY = startY + gHeight - newValues[0];
      ctx.moveTo(pointX, pointY);
      for (var i = 1; i < cols; i++) {
         pointX += pgWidth;
         pointY = startY + gHeight - newValues[i];
         ctx.lineTo(pointX, pointY);
      }
      ctx.stroke();
      //绘制坐标圆形
      ctx.beginPath();
      ctx.fillStyle = data.ctxSets.circleColor;; //圆点的颜色
      for (var i = 0; i < cols; i++) {
         var circleX = pgWidth / 2 + startX + pgWidth * i,
            circleY = startY + gHeight - newValues[i];
         ctx.moveTo(circleX, circleY); //假如不每次绘制之前确定开始绘制新路径，可以每次绘制之前移动到新的圆心
         ctx.arc(circleX, circleY, 4, 0, Math.PI * 2, false);
      }
      ctx.fill();
      //绘制坐标圆形对应的值
      ctx.beginPath();
      ctx.fillStyle = data.ctxSets.txtColor; //文本颜色
      for (var i = 0; i < cols; i++) {
         var circleX = pgWidth / 2 + startX + pgWidth * i,
            circleY = startY + gHeight - newValues[i];
         ctx.fillText(datas[i], circleX, circleY - 10);
      }
      ctx.fill();

   }

}


</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <style>
        .main{
            padding: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
	
	https://www.cnblogs.com/linxin/p/6892389.html
    <div class="main"><canvas id="canvas" width="500" height="400"></canvas></div>
    

    <script >
    	
    	function sBarChart(canvas, data, options) {
    this.canvas = document.getElementById(canvas);
    this.ctx = this.canvas.getContext('2d');
    this.data = data;                           // 存放图表数据
    this.dataLength = this.data.length;         // 图表数据的长度
    this.width = this.canvas.width;             // canvas 宽度
    this.height = this.canvas.height;           // canvas 高度
    this.padding = 50;                          // canvas 内边距
    this.yEqual = 5;                            // y轴分成5等分
    this.yLength = 0;                           // y轴坐标点之间的真实长度
    this.xLength = 0;                           // x轴坐标点之间的真实长度
    this.yFictitious = 0;                       // y轴坐标点之间显示的间距
    this.yRatio = 0;                            // y轴坐标真实长度和坐标间距的比
    this.bgColor = '#ffffff';                   // 默认背景颜色
    this.fillColor = '#1E9FFF';                 // 默认填充颜色
    this.axisColor = '#666666';                 // 坐标轴颜色
    this.contentColor = '#eeeeee';              // 内容横线颜色
    this.titleColor = '#000000';                // 图表标题颜色
	this.title = '';                            // 图表标题
	this.titlePosition = 'top';                 // 图表标题位置: top / bottom
    this.looped = null;                         // 是否循环
    this.current = 0;                           // 当前加载柱状图高度的百分数
    this.currentIndex = -1;
    this.onceMove = -1;
    this.init(options);
}
sBarChart.prototype = {
    init: function(options) {
        if(options){
            this.padding = options.padding || 50;
            this.yEqual = options.yEqual || 5;
            this.bgColor = options.bgColor || '#ffffff';
            this.fillColor = options.fillColor || '#1E9FFF';
            this.axisColor = options.axisColor || '#666666';
            this.contentColor = options.contentColor || '#eeeeee';
            this.titleColor = options.titleColor || '#000000';
            this.title = options.title;
            this.titlePosition = options.titlePosition || 'top';
        }
        this.yLength = Math.floor((this.height - this.padding * 2 - 10) / this.yEqual);
        this.xLength = Math.floor((this.width - this.padding * 1.5 - 10) / this.dataLength);
        this.yFictitious = this.getYFictitious(this.data);
        this.yRatio = this.yLength / this.yFictitious;
        this.looping();
    },
    looping: function() {
        this.looped = requestAnimationFrame(this.looping.bind(this));
        if(this.current < 100){
			this.current = (this.current + 3) > 100 ? 100 : (this.current + 3);
            this.drawAnimation();
        }else{
            window.cancelAnimationFrame(this.looped);
            this.looped = null;
            this.watchHover();
        }
    },
    drawAnimation: function() {
        for(var i = 0; i < this.dataLength; i++) {
            var x = Math.ceil(this.data[i].value * this.current / 100 * this.yRatio);
            var y = this.height - this.padding - x;
            
            this.data[i].left = this.padding + this.xLength * (i + 0.25);
            this.data[i].top = y;
            this.data[i].right = this.padding + this.xLength * (i + 0.75);
            this.data[i].bottom = this.height - this.padding;
            this.drawUpdate();
        }
    },
    drawUpdate: function() {
        this.ctx.fillStyle = this.bgColor;
        this.ctx.fillRect(0, 0, this.width, this.height);
        this.drawAxis();
        this.drawPoint();
        this.drawTitle();
        this.drawChart();
    },
    drawChart: function() {
        this.ctx.fillStyle = this.fillColor;
        for(var i = 0; i < this.dataLength; i++) {
            this.ctx.fillRect(
                this.data[i].left, 
                this.data[i].top, 
                this.data[i].right - this.data[i].left, 
                this.data[i].bottom - this.data[i].top
            );
            this.ctx.font = '12px Arial'
            this.ctx.fillText(
                this.data[i].value * this.current / 100,
                this.data[i].left + this.xLength / 4, 
                this.data[i].top - 5
            );
        }
    },
    drawAxis: function() {
        this.ctx.beginPath();
        this.ctx.strokeStyle = this.axisColor;
        // y轴线, +0.5是为了解决canvas画1像素会显示成2像素的问题
		this.ctx.moveTo(this.padding + 0.5, this.height - this.padding + 0.5);
		this.ctx.lineTo(this.padding + 0.5, this.padding + 0.5);
		// x轴线
		this.ctx.moveTo(this.padding + 0.5, this.height - this.padding + 0.5);
		this.ctx.lineTo(this.width - this.padding / 2 + 0.5, this.height - this.padding + 0.5);
		this.ctx.stroke();
    },
    drawPoint: function() {
        // x轴坐标点
        this.ctx.beginPath();
        this.ctx.font = '12px Microsoft YaHei';
        this.ctx.textAlign = 'center';
        this.ctx.fillStyle = this.axisColor; 
        for(var i = 0; i < this.dataLength; i ++){
			var xAxis = this.data[i].xAxis;
			var xlen = this.xLength * (i + 1);
			this.ctx.moveTo(this.padding + xlen + 0.5, this.height - this.padding + 0.5);
			this.ctx.lineTo(this.padding + xlen + 0.5, this.height - this.padding + 5.5);
			this.ctx.fillText(xAxis, this.padding + xlen - this.xLength / 2, this.height - this.padding + 15);
		}
        this.ctx.stroke();

        // y轴坐标点
        this.ctx.beginPath();
        this.ctx.font = '12px Microsoft YaHei';
        this.ctx.textAlign = 'right';
        this.ctx.fillStyle = this.axisColor;
        this.ctx.moveTo(this.padding + 0.5, this.height - this.padding + 0.5);
        this.ctx.lineTo(this.padding - 4.5, this.height - this.padding + 0.5);
        this.ctx.fillText(0, this.padding - 10, this.height - this.padding + 5);
        for(var i=0; i < this.yEqual; i ++){
			var y = this.yFictitious * (i + 1);
			var ylen = this.yLength * (i + 1);
            this.ctx.beginPath();
            this.ctx.strokeStyle = this.axisColor;
			this.ctx.moveTo(this.padding + 0.5, this.height - this.padding - ylen + 0.5);
			this.ctx.lineTo(this.padding - 4.5, this.height - this.padding - ylen + 0.5);
			this.ctx.stroke();
			this.ctx.fillText(y,this.padding - 10, this.height - this.padding - ylen + 5);
            this.ctx.beginPath();
			this.ctx.strokeStyle = this.contentColor;
			this.ctx.moveTo(this.padding + 0.5, this.height - this.padding - ylen + 0.5)
			this.ctx.lineTo(this.width - this.padding / 2 + 0.5, this.height - this.padding - ylen+0.5);
            this.ctx.stroke();
		}
    },
    drawTitle: function() {
        if(this.title){
            this.ctx.beginPath();
			this.ctx.textAlign = 'center';
			this.ctx.fillStyle = this.titleColor;
			this.ctx.font = '16px Microsoft YaHei';
			if(this.titlePosition === 'bottom' && this.padding >= 40){
				this.ctx.fillText(this.title, this.width / 2, this.height - 5)
			}else{
				this.ctx.fillText(this.title, this.width / 2, this.padding / 2)
			}
		}
    },
    /**
     * 监听鼠标移动事件
     */
    watchHover: function() {
        var self = this;
        self.canvas.addEventListener('mousemove', function(ev) {
			ev = ev || window.event;
            self.currentIndex = -1;
			for (var i = 0; i < self.data.length; i ++){
				if( ev.offsetX > self.data[i].left &&
                    ev.offsetX < self.data[i].right &&
                    ev.offsetY > self.data[i].top &&
                    ev.offsetY < self.data[i].bottom )
                {
					self.currentIndex = i;
				}
			}
            self.drawHover();
		})
    },
    drawHover: function() {
        if(this.currentIndex !== -1){
            if(this.onceMove === -1){
                this.onceMove = this.currentIndex;
                this.canvas.style.cursor = 'pointer';
            }
        }else{
            if(this.onceMove !== -1){
                this.onceMove = -1;
                this.canvas.style.cursor = 'inherit';
            }
        }
    },
    /**
     * y轴坐标点之间显示的间距
     * @param data 
     * @return y轴坐标间距
     */
    getYFictitious: function(data) {
        var arr = data.slice(0);
        arr.sort(function(a,b){
            return -(a.value-b.value);
        });
        var len = Math.ceil(arr[0].value / this.yEqual);
        var pow = len.toString().length - 1;
        pow = pow > 2 ? 2 : pow;
        return Math.ceil(len / Math.pow(10,pow)) * Math.pow(10,pow);
    }
}
    </script>
    <script>
        var data = [
            {xAxis:'2012',value:2141},
            {xAxis:'2013',value:1499},
            {xAxis:'2014',value:3260},
            {xAxis:'2015',value:1170},
            {xAxis:'2016',value:970},
            {xAxis:'2017',value:2350}
        ]
        var chart = new sBarChart('canvas',data,{
            title: 'xxx公司年度盈利',
            bgColor: '#829dba',
            titleColor: '#ffffff',      // 标题颜色
            titlePosition: 'top',       // 标题位置
            fillColor: '#72f6ff',       // 柱状填充色
            axisColor: '#eeeeee',       // 坐标轴颜色
            contentColor: '#bbbbbb'     // 内容横线颜色
        });
    </script>
</body>
</html>

多个环形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>asd</title>
	</head>
	<body>
		
		
<div class="canvas">

       <canvas id="pTestPassRate1" width="242" height="270"></canvas>

       <div class='canvasTxt'>用例通过数</div>
       
       
       
        <canvas id="canvas2" width="242" height="270"></canvas>
</div>



<script></script>



<script>
	
	window.onload=function(){
		function degToRad(deg){//角度转弧度
			
			return deg*(Math.PI/180); ;
		}
		
	   var pTestPassRate1 =document.getElementById("pTestPassRate1");

     var ctx = pTestPassRate1.getContext("2d");
     ctx.lineWidth = 10;
    //Background
//    gradient = ctx.createRadialGradient(250, 250, 5, 250, 250, 300);
//    gradient.addColorStop(0, "#03303a");
//    gradient.addColorStop(1, "black");
//    ctx.fillStyle = gradient;
    ctx.fillStyle = '#999';
    ctx.fillRect(0, 0, 500, 500);
    //用例数
    ctx.beginPath();
    ctx.strokeStyle = '#FE47FC'
    ctx.arc(60, 100, 50, degToRad(-90), degToRad(-300),true ); //总数
    ctx.stroke();
    //Minutes
    ctx.beginPath();
    ctx.strokeStyle = '#3AF8F8';
    ctx.arc(60, 100, 38, degToRad(-90), degToRad(-220),true );//通过
    ctx.stroke();

    ctx.beginPath();
    ctx.strokeStyle = '#f00';
    ctx.arc(60, 100, 24, degToRad(-90), degToRad(-180),true ); //未通过
    ctx.stroke();



    //font
    ctx.font = "oblique 12px Helvetica"; //设置字体样式
    ctx.fillStyle = '#3AF8F8'
    ctx.fillText(" 通过数", 92, 80);// 多个ctx.fillText可以达到文字换行效果
    ctx.fillText("______", 92, 82);
    ctx.fillStyle = 'red'
    ctx.fillText(" 未通过数", 92, 110);
    ctx.fillText("_____", 92, 112);
    ctx.fillStyle = '#FE47FC'
    ctx.fillText(" 总用例数", 92, 140);
    ctx.fillText("_____", 92, 142);
}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	//--------------------------
	
	var oQuadraticCurveTo = document.getElementById("canvas2");
var oContext = oQuadraticCurveTo.getContext("2d");
var x=2;
 
    function drawLine(){
        oContext.beginPath();
        oContext.moveTo(0,0);                       //起始点（x,y）
        oContext.quadraticCurveTo(100, 0, 200, 200);    //创建二次贝塞尔曲线
        oContext.lineWidth = 2;
        oContext.strokeStyle = "tomato";
        oContext.stroke();
        oContext.closePath();
    }
    function drawPoint(x,y){
        oContext.beginPath();
        oContext.arc(x, y, 3, 0, 2 * Math.PI, false);
        oContext.fillStyle="red";
        oContext.fill();
         
        oContext.stroke();
        oContext.closePath();
 
    }
 
    //画移动的线
    function drawMivie(){
         
        y=Math.pow(x,2)*0.005;
       
             
        if(x > 198){
            x=0;
        }else{
        //防止首位相连<br>　　　　　//清楚之前的图，重新绘制
        oContext.clearRect(0, 0, 500, 500);
        oContext.closePath();
        drawStatic(oContext);
        //
        x=x+1;  
        y=Math.pow(x,2)*0.005;
        //画圆球
        oContext.beginPath();
        oContext.strokeStyle = "white";
        oContext.arc(x,y,5,0,2*Math.PI,false);
        oContext.fillStyle="white";
        oContext.fill();
        oContext.stroke();
        oContext.closePath();
        }
    }
    //画静态元素,红线和两端
    function drawStatic(){
        drawLine();
        drawPoint(0,0);
        drawPoint(200,200);
    }
 
 
    setInterval(function(){
            drawMivie(oContext);
        },20);
	
	
</script>
//原文：https://blog.csdn.net/qq_36436877/article/details/80184749?utm_source=copy 
//版权声明：本文为博主原创文章，转载请附上博文链接！




	</body>
</html>

canvas 简易扇形图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #graph {
/*            border: 1px solid black;
            height: 100%;
             100%;
            box-sizing: border-box;*/
        }
    </style>
</head>
<body>
<div id="circle" style=" 500px;float: left;"></div>
</body>
</html>
<script type="text/javascript">
	
	    Math.formatFloat = function(f, digit) { 
    var m = Math.pow(10, digit); 
    return parseInt(f * m, 10) / m; 
} 
var A = 0.1; 
var B = 0.2;
console.log("浮点",Math.formatFloat(A + B, 1) === 0.3);

	
	
	
(function(window,undefined){
	
	
	
    var data = [
        {"product":"产品1","value":25,"color":"green"},
        {"product":"产品2","value":5,"color":"red"},
        {"product":"产品3","value":60,"color":"yellow"},
        {"product":"产品4","value":10,"color":"blue"}
    ]
     
   // 把角度转换为弧度
    function angleToRadian( angle ) {
        return Math.PI / 180 * angle;
//       var val=Math.PI / 180 * angle;
//       var num=num||2;
//  	 var m= Math.pow(10,num)
//  	
//      return parseInt(val * m, 10) / m;
        
    }  
    
    // 弧度  换为角度
    function RadianToangle( hd,num ) {
    	 var val=180/Math.PI * hd;
    	 var num=num||2;
    	
    	 var m= Math.pow(10,num)
    	
        return parseInt(val * m, 10) / m;

    }  
     
    
    
    var dom_circle = document.getElementById('circle');
    if(dom_circle){
        var canvas = document.createElement("canvas");
        dom_circle.appendChild(canvas);
        var ctx = canvas.getContext('2d');
        
         var speed=6;
        
        var defaultStyle = function(Dom,canvas){
            if(Dom.clientWidth <= 300)
            {
                canvas.width = 300;
                Dom.style.overflowX = "auto";
            }
            else{
                canvas.width = Dom.clientWidth;
            }
            if(Dom.clientHeight <= 300)
            {
                canvas.height = 300;
                Dom.style.overflowY = "auto";
            }
            else
            {
                canvas.height = Dom.clientHeight;
            }
            
          
            
            //坐标轴区域
            //注意，实际画折线图区域还要比这个略小一点
            return {
                p1:'green',
                p2:'red',
                p3:'yellow',
                p4:'blue',
                x: 0 ,    //坐标轴在canvas上的left坐标
                y: 0 ,    //坐标轴在canvas上的top坐标
                maxX: canvas.width ,   //坐标轴在canvas上的right坐标
                maxY: canvas.height ,   //坐标轴在canvas上的bottom坐标
                r:(canvas.width)/2,  //起点
                ry:(canvas.height)/2,  //起点
                cr: (canvas.width)/4, //半径
                startAngle:angleToRadian(-90),               //开始角度  起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
                endAngle:angleToRadian(270),     //结束角度
             
                xAngle:angleToRadian(speed)        //每次偏移量
            };
        }
        //画圆
        var tmpAngle = -(1/2*Math.PI);//90弧度  每个结束角度
        var ds = null;
        var sum = 0;
            for(var s=0;s<data.length;s++){
            	
            	sum+=data[s].value;
            }
        
        console.log("tmpAngle弧度",tmpAngle,angleToRadian(-90))
        ////每个数据占据的比重弧度   
        var percent1 = data[0].value/sum * Math.PI * 2 ;//36*1=36 
        var percent2 = data[1].value/sum * Math.PI * 2 + percent1; //36*2+36=108
        var percent3 = data[2].value/sum * Math.PI * 2 + percent2;//36*6+108=324
        var percent4 = data[3].value/sum * Math.PI * 2 + percent3;//36*1+324=360
        console.log(data[0].value/sum,"1结束角度",RadianToangle(percent1));
        console.log(data[1].value/sum,"2结束角度",RadianToangle(percent2));
        console.log(data[2].value/sum,"3结束角度",RadianToangle(percent3));
        console.log(data[3].value/sum,"4结束角度",RadianToangle(percent4));
        
        var arrs=[];
        var sta=null;
        for(var i=0;i<data.length;i++){
        	
        }
        
        
         function draw2(x,y,r,startAngle,endAngle,color){
     	 
           ctx.save();
           ctx.beginPath();
           ctx.moveTo(x, y);
           ctx.arc(x, y, r, startAngle, endAngle,false);
           ctx.fillStyle = color;
           ctx.fill();
           ctx.closePath();   
           ctx.restore();
        }
        
    

    
    
        
        var tmpSum = 0;
        var drawCircle = function(){
            
             
            if(tmpAngle >= ds.endAngle){
            	console.log("绘制完成1",ds.xAngle);
                return false;
            }else if(tmpAngle+ ds.xAngle > ds.endAngle){
            	console.log("绘制完成2");
                tmpAngle = ds.endAngle;
                
            }else{
//          	if(RadianToangle(ds.xAngle)>speed*0.25){
//               ds.xAngle=ds.xAngle*0.21;
//             }
            	
              tmpAngle += (ds.xAngle);// 每个结束
              
              tmpSum += (ds.xAngle); //每个开始 弧度
                //console.log("之前",tmpSum,RadianToangle(tmpSum))
              tmpAngle=RadianToangle(angleToRadian(tmpAngle),2);//弧度转角度  角度转弧度
              tmpSum=RadianToangle(angleToRadian(tmpSum),2);//弧度转角度  角度转弧度
              console.log("之后",RadianToangle(tmpSum))
              // tmpAngle=float_calculator.add(tmpAngle+ds.xAngle)
               //tmpSum=float_calculator.add(tmpSum+ds.xAngle)
            }
           // console.log(tmpSum,ds.startAngle+'***'+tmpAngle);
            // console.log(tmpSum);
            // ctx.clearRect(ds.x,ds.y,canvas.width,canvas.height);
            
            
            //if(RadianToangle(tmpSum) > RadianToangle(percent1) && RadianToangle(tmpSum) <=RadianToangle(percent2))
            if(tmpSum > percent1 && tmpSum<=percent2)
            {
            	var srartAngel= ds.startAngle+percent1;
              console.log("最小2red",RadianToangle(percent1),"第一个运动感角度",RadianToangle(tmpSum),"最大",RadianToangle(percent2));
              draw2(ds.r,ds.ry,ds.cr,srartAngel,tmpAngle,ds.p2)
                
            }
            else if(tmpSum > percent2 &&tmpSum <=percent3)
            {    
            	
                 //console.log("最小3yellow",RadianToangle(percent1),"第一个运动感角度",RadianToangle(tmpSum),"最大",RadianToangle(percent2));
                draw2(ds.r,ds.ry,ds.cr,ds.startAngle+percent2,tmpAngle,ds.p3)
            }
            else if(tmpSum > percent3 )
            {

                 draw2(ds.r,ds.ry,ds.cr,ds.startAngle+percent3,tmpAngle,ds.p4)
            }
            else{

                 draw2(ds.r,ds.ry,ds.cr,ds.startAngle,tmpAngle,ds.p1)
            }
            
            
            
            
   
            requestAnimationFrame(drawCircle);
        }
        
        
        this.toDraw = function(){
            ds= defaultStyle(dom_circle,canvas);
            // console.log(tmpAngle);
            // console.log(ds.xAngle)
            ctx.clearRect(ds.x,ds.y,canvas.width,canvas.height);
            drawCircle();
        }
        
        
        this.toDraw();
        var self = this;
        window.onresize = function(){
            //self.toDraw()
        }
    }
 
})(window);    
</script>

上面的存在bug,扇形2 可以

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas{
            border: 1px solid #A4E2F9;
        }
    </style>
</head>
<body>
	https://github.com/sutianbinde/charts
	https://www.cnblogs.com/chengduxiaoc/p/7649048.html
	https://www.cnblogs.com/chengduxiaoc/p/7705727.html
	
    <div height="400" width="600" style="margin:50px">
        <canvas id="chart"> 你的浏览器不支持HTML5 canvas </canvas>
    </div>
    
    <script type="text/javascript">
        function goChart(dataArr){
            
                 
   // 把角度转换为弧度
    function angleToRadian( angle ) {
        return Math.PI / 180 * angle;
//       var val=Math.PI / 180 * angle;
//       var num=num||2;
//  	 var m= Math.pow(10,num)
//  	
//      return parseInt(val * m, 10) / m;
        
    }  
    
    // 弧度  换为角度
    function RadianToangle( hd,num ) {
    	 var val=180/Math.PI * hd;
    	 var num=num||2;
    	
    	 var m= Math.pow(10,num)
    	
        return parseInt(val * m, 10) / m;

    }  
            
            
            
            var animated=true;
            // 声明所需变量
            var canvas,ctx;
            // 图表属性
            var cWidth, cHeight, cMargin, cSpace;
            // 饼状图属性
            var radius,ox,oy;//半径 圆心
            var tWidth, tHeight;//图例宽高
            var posX, posY, textX, textY;
            var startAngle, endAngle;
            var totleNb;
            // 运动相关变量
            var ctr, numctr, speed;
            //鼠标移动
            var mousePosition = {};
            
            //线条和文字
            var lineStartAngle,line,textPadding,textMoveDis;
        
            // 获得canvas上下文
            canvas = document.getElementById("chart");
            if(canvas && canvas.getContext){
                ctx = canvas.getContext("2d");
            }
            initChart(); 
            
            // 图表初始化
            function initChart(){
                // 图表信息
                cMargin = 20;
                cSpace = 40;
                
                canvas.width = canvas.parentNode.getAttribute("width")* 2 ;
                canvas.height = canvas.parentNode.getAttribute("height")* 2;
                canvas.style.height = canvas.height/2 + "px";
                canvas.style.width = canvas.width/2 + "px";
                cHeight = canvas.height - cMargin*2;
                cWidth = canvas.width - cMargin*2;
        
                //饼状图信息
                radius = cHeight*2/6;  //半径  高度的2/6
                ox = canvas.width/2 + cSpace;  //圆心
                oy = canvas.height/2;
                tWidth = 60; //图例宽和高
                tHeight = 20; 
                posX = cMargin;
                posY = cMargin;   //
                textX = posX + tWidth + 15
                textY = posY + 18;
                startAngle = endAngle = -90*Math.PI/180; //起始弧度 结束弧度
               
    
                //将传入的数据转化百分比
                totleNb = 0;
                new_data_arr = [];
                for (var i = 0; i < dataArr.length; i++){
                    totleNb += dataArr[i][0];
                }
                
                console.log("总数值totleNb",totleNb);
                for (var i = 0; i < dataArr.length; i++){
                    new_data_arr.push( dataArr[i][0]/totleNb );
                }
             
                
                
                
                // 运动相关
                ctr = 3;//初始步骤
                numctr = 50;//步骤
                speed = 1.2; //毫秒 timer速度
                
                //指示线 和 文字
                lineStartAngle = -startAngle;
                line=40;         //画线的时候超出半径的一段线长
                textPadding=10;  //文字与线之间的间距
                textMoveDis = 200; //文字运动开始的间距
            }
        

            console.log("每个 百分比 new_data_arr",new_data_arr);
            
            
            
            //绘制动画
            pieDraw();
            function pieDraw(mouseMove){
                

                
                //设置旋转
                ctx.save();
               // ctx.translate(ox, oy);
               // ctx.rotate((Math.PI*2/numctr)*ctr/2);
               
               var percent=ctr/numctr;//运动的百分比
               
                for (var j = 0; j < dataArr.length; j++){
                    
                    //绘制饼图
                    //endAngle = endAngle + (new_data_arr[j]*percent)* Math.PI * 2; //结束弧度
                    if(animated){
                    	endAngle = endAngle + (new_data_arr[j]*percent)* Math.PI * 2; //结束弧度
                    }else{
                        endAngle = endAngle + new_data_arr[j]* Math.PI * 2; //结束弧度	
                    }
                    
                    ctx.beginPath();
                    
                   // ctx.moveTo(0,0); //移动到到圆心
                   // ctx.arc(0, 0, radius*ctr/numctr, startAngle, endAngle, false); //绘制圆弧
                    
                    ctx.moveTo(ox, oy); //移动到到圆心
                    ctx.arc(ox, oy, radius, startAngle, endAngle, false); //绘制圆弧
                    
                    
                    ctx.fillStyle = dataArr[j][1];
                    ctx.fill();
                    
                    
                    ctx.closePath();
                   
                  
                    
                    startAngle = endAngle; //设置起始弧度
                    if( j == dataArr.length-1 ){
                        startAngle = endAngle =270*Math.PI/180; //起始弧度 结束弧度
                    }
                    
                     
                }
                
               ctx.restore();
                 //console.log("ctr",ctr,"numctr",numctr,(ctr/numctr).toFixed(2));  
                if(ctr<numctr){
                    ctr++;
                    setTimeout(function(){
                        //ctx.clearRect(-canvas.width,-canvas.width,canvas.width*2, canvas.height*2);
                        //ctx.clearRect(-canvas.width, -canvas.height,canvas.width*2, canvas.height*2);
                     
                        pieDraw();
                    }, speed*=1.02);
                }
            }
            

            
        }
        
        var chartData = [[25,"#2dc6c8","瓜子"], [12.5,"#b6a2dd", "花生"], [12.5,"#5ab1ee","土豆"], [50,"#d7797f","南瓜四号"]];
        
        goChart(chartData);


    </script>
</body>
</html>

canvas 火花漂移

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
    <style>
        
        :root {
  --blur: 2;
}
* {
  box-sizing: border-box;
}
html,
body {
  font-family: 'Arial', sans-serif;
  background: #111;
}
canvas {
  position: fixed;
  height: 100vh;
  width: 100vw;
  -webkit-filter: blur(calc(var(--blur) * 1px));
          filter: blur(calc(var(--blur) * 1px));
}
input {
  cursor: pointer;
  display: block;
}
label {
  margin-bottom: 30px;
}
label:last-of-type {
  margin-bottom: 0;
}
.menu {
  position: absolute;
  top: 0;
  left: 0;
  color: #fafafa;
  background: rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  padding: 30px;
  -webkit-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
  transition: -webkit-transform 0.25s ease-out;
  transition: transform 0.25s ease-out;
  transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
}
.menu--open {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
.icon {
  height: 60%;
  width: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
button {
  height: 44px;
  width: 44px;
  background: 0;
  cursor: pointer;
  border: 0;
  background: rgba(0,0,0,0.15);
  padding: 0;
  margin: 0;
  position: absolute;
  left: 100%;
  top: 0;
}
button span {
  width: 100%;
  height: 20%;
  border-radius: 4px;
  background: #fff;
  display: block;
  position: absolute;
  top: 0;
  transition: -webkit-transform 0.25s ease-out;
  transition: transform 0.25s ease-out;
  transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
}
button span:nth-child(1) {
  -webkit-transform-origin: top left;
          transform-origin: top left;
}
button span:nth-child(2) {
  top: 40%;
}
button span:nth-child(3) {
  -webkit-transform-origin: top left;
          transform-origin: top left;
  top: 80%;
}
.menu--open span:nth-child(1) {
  -webkit-transform: translate(5px, 3px) rotate(45deg);
          transform: translate(5px, 3px) rotate(45deg);
}
.menu--open span:nth-child(2) {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}
.menu--open span:nth-child(3) {
  -webkit-transform: translate(2px, 0) rotate(-45deg);
          transform: translate(2px, 0) rotate(-45deg);
}

    </style>    
        <canvas></canvas>
<div class="menu">
  <button>
    <div class="icon"><span></span><span></span><span></span></div>
  </button>
  <label>Amount
    <input type="range" min="1" max="500" step="1" value="100" id="AMOUNT"/>
  </label>
  <label>Upper Velocity Bounds
    <input type="range" min="1" max="50" step="1" value="20" id="UPPER_LIMIT"/>
  </label>
  <label>Lower Velocity Bounds
    <input type="range" min="1" max="50" step="1" value="1" id="LOWER_LIMIT"/>
  </label>
  <label>Blur
    <input type="range" min="0" max="10" step="1" value="2" id="BLUR"/>
  </label>
</div>


<script>
    
    var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

requestAnimationFrame = requestAnimationFrame || webkitRequestAnimationFrame;

var menu = document.querySelector('.menu');
var modify = function modify(e) {
  OPTIONS[e.target.id] = parseInt(e.target.value, 10);
  if (e.target.id === 'AMOUNT') {
    context.clearRect(0, 0, canvas.width, canvas.height);
    particles = genParticles();
  }
  if (e.target.id === 'BLUR') {
    document.documentElement.style.setProperty('--blur', parseInt(e.target.value, 10));
  }
};
menu.addEventListener('change', modify);

var button = document.querySelector('button');
var handleClick = function handleClick(e) {
  return menu.classList.toggle('menu--open');
};
button.addEventListener('click', handleClick);

var OPTIONS = {
  AMOUNT: 100,
  UPPER_LIMIT: 20,
  LOWER_LIMIT: 1
};

var UPPER_SIZE = 10;
var LOWER_SIZE = 4;

var doIt = function doIt() {
  return Math.random() > 0.5;
};
var update = function update(p) {
  return doIt() ? Math.max(OPTIONS.LOWER_LIMIT, p - 1) : Math.min(p + 1, OPTIONS.UPPER_LIMIT);
};
var reset = function reset(p) {
  p.x = p.startX;
  p.y = p.startY;
};
var floored = function floored(r) {
  return Math.floor(Math.random() * r);
};
var genParticles = function genParticles() {
  return new Array(OPTIONS.AMOUNT).fill().map(function (p) {
    var size = floored(UPPER_SIZE) + LOWER_SIZE;
    var c = document.createElement('canvas');
    var ctx = c.getContext('2d');
    var r = Math.PI / 180 * floored(360);
    var color = 'rgba(255,' + (100 + Math.floor(Math.random() * 70)) + ', 0, ' + Math.random() + ')';
    var xDelayed = doIt();
    var startX = xDelayed ? -(size + floored(canvas.width)) : floored(canvas.width * 0.25);
    var startY = xDelayed ? size + floored(canvas.height * 0.25) + Math.floor(canvas.height * 0.75) : canvas.height + size + floored(canvas.height);
    c.height = size;
    c.width = size;
    context.globalCompositeOperation = 'multiply';
    // ctx.filter = `blur(${Math.random() * size}px)`
    ctx.translate(size / 2, size / 2);
    ctx.rotate(r);
    ctx.translate(-(size / 2), -(size / 2));
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, size, size);
    return {
      x: startX,
      y: startY,
      startY: startY,
      startX: startX,
      c: c,
      r: r,
      vx: floored(OPTIONS.UPPER_LIMIT / 4),
      vy: floored(OPTIONS.UPPER_LIMIT / 4),
      size: size
    };
  });
};

var particles = genParticles();
var FRAME_COUNT = 0;

var draw = function draw() {
  if (canvas.width !== window.innerWidth || canvas.height !== window.innerHeight) {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    particles = genParticles();
  }
  // context.restore()
  var _iteratorNormalCompletion = true;
  var _didIteratorError = false;
  var _iteratorError = undefined;

  try {
    for (var _iterator = particles[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
      var particle = _step.value;

      context.clearRect(particle.x, particle.y, particle.size, particle.size);
      FRAME_COUNT++;
      if (particle.y < canvas.height || particle.startX < 0) particle.x += particle.vx;
      if (particle.x > 0 || particle.startY > canvas.height) particle.y -= particle.vy;
      if (FRAME_COUNT % 11 === 0 && doIt()) particle.vx = update(particle.vx);
      if (FRAME_COUNT % 13 === 0 && doIt()) particle.vy = update(particle.vy);
      context.drawImage(particle.c, particle.x, particle.y);
      if (particle.x > canvas.width || particle.y < -particle.size) reset(particle);
    }
  } catch (err) {
    _didIteratorError = true;
    _iteratorError = err;
  } finally {
    try {
      if (!_iteratorNormalCompletion && _iterator.return) {
        _iterator.return();
      }
    } finally {
      if (_didIteratorError) {
        throw _iteratorError;
      }
    }
  }

  requestAnimationFrame(draw);
};
requestAnimationFrame(draw);
    
</script>
    </body>
</html>

　参考

https://github.com/sutianbinde/charts

https://www.cnblogs.com/chengduxiaoc/p/7705727.html

canvas 笔记整理

canvas 判断点是否在多边形内部

射线法判断点是否在多边形内部

回转数法实现判断点是否在多边形内部

canvas Retina 屏幕优化

jcanvascript.js类库备份

jCanvaScript使用心得1（—常用图绘制方法）

绘制圆形

绘制矩形

绘制弧线

绘制路径

绘制二次曲线，数组的点包含数组(x,y,x控制点,控制点y)，用于创建曲线应至少两个数组。

绘制文字

canvas 公式

canvas文字居中

Canvas

canvas 简易扇形图

canvas 笔记整理

canvas 判断点是否在多边形内部

射线法判断点是否在多边形内部

回转数法实现 判断点是否在多边形内部

canvas Retina 屏幕优化

jcanvascript.js类库 备份

jCanvaScript使用心得1（—常用图绘制方法）

绘制圆形

绘制矩形

绘制弧线

绘制路径

绘制二次曲线，数组的点包含数组(x,y,x控制点,控制点y)，用于创建曲线应至少两个数组。

绘制文字

canvas 公式

canvas文字居中

Canvas

canvas 简易扇形图

回转数法实现判断点是否在多边形内部

jcanvascript.js类库备份