上一篇文章我们了解了一些canvas基本图形绘制 

下面我们再来看一些相关操作



坐标轴变换

我们画布中默认的坐标轴与浏览器坐标轴相同 

x正半轴朝右 

y正半轴朝下 

但是我们可以手动设置画布坐标轴变换 

首先还是会获取“画布”和“画笔”



<canvas id="myCanvas" width=500 height=500></canvas>



var canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d');

先来在画布中画一个正方形



ctx.fillStyle = '#f40';
ctx.fillRect(100, 100, 300, 300);



在图中我标记了画布的坐标轴



平移

使用translate(dx, dy)方法可以平移坐标轴 

参数为x轴平移距离和y轴平移距离

ctx.translate(100, 100);
ctx.fillStyle = '#f40';
ctx.fillRect(100, 100, 300, 300);





缩放

使用scale(sx, sy)方法可以扩大坐标轴 

参数为x轴和y轴的缩放因子 

坐标也会等比缩放



ctx.scale(1.2, 1.2);
ctx.fillStyle = '#f40';
ctx.fillRect(100, 100, 300, 300);



旋转

使用rotate(deg)方法可以旋转坐标轴

ctx.rotate(Math.PI/12);
ctx.fillStyle = '#f40';
ctx.fillRect(100, 100, 300, 300);





保存与恢复

在改变坐标轴之前 

我们使用save()可以保存之前的画布坐标轴 

然后使用restore()可以让坐标轴恢复到之前的样子



ctx.save(); //保存之前的正常坐标轴
ctx.rotate(Math.PI/12);
ctx.fillStyle = '#f40';
ctx.fillRect(100, 100, 300, 300);
ctx.restore();//恢复到正常坐标轴
ctx.fillStyle = '#000';
ctx.fillRect(100, 100, 300, 300);



还有两个方法变换坐标轴了解即可 

setTransform(a, b, c, d, e, f) 

这个方法会重置坐标轴后再进行变换 

transform(a, b, c, d, e, f) 

这个方法是在之前坐标轴的基础上进行变换

这两个方法都是替换为变换矩阵 

a  c  e 

b  d  f 

0  0  1 

和CSS3的图形变换类似 

参数分别表示：水平缩放、水平倾斜、垂直倾斜、垂直倾斜、垂直缩放、水平移动、垂直移动



图案填充

现在我先在页面中添加一个图片元素



<img src="./images/lamp.gif">



我们可以将这个图片填充到我们的画布中 

使用createPattern(img/canvas/video, “repeat”/”no-repeat”/”repeat-x”/”repeat-y”)



var img = document.getElementsByTagName('img')[0];
var pt = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pt;
ctx.fillRect(0, 0, 500, 500);



它返回了CanvasPattern对象 

定义了填充规则 

除了img标签外，我们还可以填充canvas和video元素 

使用方法是一样的



渐变

与CSS3中的渐变类似 

canvas中的渐变也分为线性渐变和径向渐变 

和图案填充的类似，需要定义我们的渐变规则



线性渐变

createLinearGradient(x1, y1, x2, y2) 

表示定义从一点到另一点的线性渐变 

返回一个CanvasGradient()对象 

上面有addColorStop()用来定义我们的渐变色 

0就是起始点，1是终点

var lGradient = ctx.createLinearGradient(0, 0, 0, 250);
lGradient.addColorStop(0, '#000');
lGradient.addColorStop(1, '#fff');
ctx.fillStyle = lGradient;
ctx.fillRect(0, 0, 500, 250);



注意定义的渐变必须要在渐变区域里才能够显示

径向渐变

createRadialGradient(x1, y1, r1, x2, y2, r2) 

相比线性渐变，多了两个点的半径参数 

除此之外使用方法和上面是一样的 

就不多做解释了 

比如说我们可以绘制一个渐变同心圆

var rGradient = ctx.createRadialGradient(250, 250, 100, 250, 250, 250);
rGradient.addColorStop(0, '#fff');
rGradient.addColorStop(0.5, '#000');
rGradient.addColorStop(1, '#fff');
ctx.fillStyle = rGradient;
ctx.fillRect(0, 0, 500, 500);





阴影

类比于CSS3中的box-shadow属性 

在canvas中我们使用 

shadowColor 定义阴影颜色 

shadowOffsetX/Y 控制阴影偏移量 

shadowBlur 定义阴影模糊半径 

要注意的是 
阴影的偏移量不受坐标系变换影响



ctx.shadowColor = '#000';
ctx.shadowOffsetX = 30;
ctx.shadowOffsetY = 30;
ctx.shadowBlur = 30;
ctx.fillStyle= '#f40';
ctx.fillRect(100, 100, 300, 300);

设置阴影相关属性后才可以使用fillRect绘制带阴影的矩形



==主页传送门==

因为最近在做数据的统计，需要表现在网页上 也查过一些插件和一些绘图语言，学习时间成本太高，所以用上了HTML5的Canvas标签和JavaScript，可以很快的满足我需要的绘图需求

JavaScript中前两句： 

var canvas1=document.getElementById(“canvas1”); 
var context=canvas1.getContext(“2d”); 

第一句获取在HTML中的canvas  

第二句得到canvas内置的绘图对象，目前只支持2d  

这两句一般为通用格式

写一个函数 function pageLoad()：



        var x0=0.1*canvas1.width;
        var y0=0.9*canvas1.height;
        //the begin of the axis
        var widthAx=0.8*canvas1.width;
        var heightAx=0.8*canvas1.height;
        //the width and height of the axis system

上面是获取到圆点的坐标和坐标轴的长宽度  
Canvas的坐标和openGL一致，右上角为原点



context.moveTo(0.1*canvas1.width,0.1*canvas1.height);
context.lineTo(0.1*canvas1.width,0.9*canvas1.height);
context.lineTo(0.9*canvas1.width,0.9*canvas1.height);
context.moveTo(0.09*canvas1.width,0.115*canvas1.height);
context.lineTo(0.1*canvas1.width,0.1*canvas1.height);
context.lineTo(0.11*canvas1.width,0.115*canvas1.height);
context.moveTo(0.885*canvas1.width,0.89*canvas1.height);
context.lineTo(0.9*canvas1.width,0.9*canvas1.height);
context.lineTo(0.885*canvas1.width,0.91*canvas1.height);
context.strokeStyle='black';
context.lineWidth=2;
context.stroke();
context.beginPath();

上面的代码中： 

stroke()方法为Canvas的画图方法，绘制之前的定制好的路径，每一次做好路径要绘制  

beginPath()用于开始一条新路径，即准备画新的图，用新的画笔的时候使用



var textX=[0,1,2,3,4];
for(var i=0;i<4&&x0<canvas1.width;i++){
    context.font="20pt Calibri";
    context.fillText(textX[i],x0,y0+20);
    x0+=0.2*canvas1.width;
}//X轴的数字

上面为X坐标数字的显示



context.arc(nowX0,y0-tempData[i]/40*canvas1.height*0.8,6,0,2*Math.PI); 

画圆函数context.arc为画圆  

context.fill()方法为把路径填充 

context.stroke()方法是把路径描绘出来，圆环和圆心的区别



完整代码：



<!DOCTYPE html>
<html>
<head>
    <title>
    </title>
</head>
<body onload="pageLoad();">
    <div style="margin-top:30%">
        <canvas id="canvas1" width="500" height="500" ></canvas>
    </div>
<script type="text/javascript">
    var canvas1=document.getElementById("canvas1");
    var context=canvas1.getContext("2d");
    function pageLoad()
    {
        var x0=0.1*canvas1.width;
        var y0=0.9*canvas1.height;
        //the begin of the axias
        var widthAx=0.8*canvas1.width;
        var heightAx=0.8*canvas1.height;
        //the width and height of the axais system

        context.moveTo(0.1*canvas1.width,0.1*canvas1.height);
        context.lineTo(0.1*canvas1.width,0.9*canvas1.height);
        context.lineTo(0.9*canvas1.width,0.9*canvas1.height);
        context.moveTo(0.09*canvas1.width,0.115*canvas1.height);
        context.lineTo(0.1*canvas1.width,0.1*canvas1.height);
        context.lineTo(0.11*canvas1.width,0.115*canvas1.height);
        context.moveTo(0.885*canvas1.width,0.89*canvas1.height);
        context.lineTo(0.9*canvas1.width,0.9*canvas1.height);
        context.lineTo(0.885*canvas1.width,0.91*canvas1.height);
        context.strokeStyle='black';
        context.lineWidth=2;
        context.stroke();
        context.beginPath();
        var textX=[0,1,2,3,4];
        for(var i=0;i<4&&x0<canvas1.width;i++){

            context.font="20pt Calibri";
            context.fillText(textX[i],x0,y0+20);
            x0+=0.2*canvas1.width;
        }//X轴的数字
        var textY=[10,20,30,40];
        x0=0.1*canvas1.width;
        for(var i=0;i<4&&y0>0;i++)
        {
            y0-=0.2*canvas1.height;
            context.font="20pt Calibri";
            context.fillText(textY[i],x0-30,y0);

        }
        // drawData();
        var tempData=[32,22,30];
        y0=0.9*canvas1.height;
        var nowX0=x0+0.2*canvas1.width;
        context.arc(nowX0,y0-canvas1.height*0.8*tempData[0]/40,6,0,2*Math.PI);
        context.fillStyle="red";
        context.fill();
        context.beginPath();
        context.moveTo(nowX0,y0-canvas1.height*0.8*tempData[0]/40);
        for(var i=1;i<3;i++)
        {
            nowX0+=0.2*canvas1.width;
            context.lineTo(nowX0,y0-tempData[i]/40*canvas1.height*0.8);
            context.strokeStyle='red';
            context.stroke();
            context.beginPath();
            context.fillStyle="red";
            context.arc(nowX0,y0-tempData[i]/40*canvas1.height*0.8,6,0,2*Math.PI);
            //context.stroke();
            context.fill();
        }

    }

</script>

</body>
</html>

获取音频文件，通过audioContent创建分析器
init (url) {
      if (!window.AudioContext) {
        alert('您的浏览器不支持AudioContext')
      } else {
        // 创建上下文
        this.audioContent = new window.AudioContext()
        // var source = null
        // 使用Ajax获取音频文件
        var request = new XMLHttpRequest()
        request.open('GET', url, true)
        request.responseType = 'arraybuffer'// 配置数据的返回类型
        request.onload = () => {
          var arraybuffer = request.response
          this.audioContent.decodeAudioData(arraybuffer, (buffer) => {
            // 创建分析器
            var analyser = this.audioContent.createAnalyser()
            this.source = this.audioContent.createBufferSource()
            // 将source与分析器链接
            this.source.connect(analyser)
            // 将分析器与destination链接，这样才能形成到达扬声器的通路
            // analyser.connect(this.audioContent.destination)
            // 将解码后的buffer数据复制给source
            this.source.buffer = buffer
            // 播放
            this.source.start(0)
            this.source.addEventListener('ended', (e) => {
              this.getInit()
              // media.pause();
            }, false)
            this.draw(analyser) // 这儿是画图的方法，
          }, function (e) {
            console.info('处理出错')
          })
        }
        request.send()
        console.log()
      }
    }


下面是画图的js代码

const xList = [
  '20Hz',
  '46Hz',
  '69Hz',
  '105Hz',
  '160Hz',
  '244Hz',
  '371Hz',
  '565Hz',
  '859Hz',
  '1.30KHz',
  '1.98KHz',
  '3.02KHz',
  '4.60KHz',
  '7.00KHz',
  '10.6KHz',
  '20KHz'
]

var analyser1 = {}
var padding1 = 30
let Coordinates = {
  constructor (canvas, padding, analyser) {
    analyser1 = analyser
    padding1 = padding
    this.canvas = canvas || document.querySelector('canvas')
    this.padding = padding
    this.ctx = this.canvas.getContext('2d')
    // 根据padding计算原点
    this.x0 = 0 + padding
    this.y0 = this.canvas.height - padding

    // 定义箭头的长度和高度
    this.arrowWidth = 30
    this.arrowHeight = 5

    // 定义刻度间隔
    this.space = 70
    this.yspace = 20
    // 定义刻度长度
    this.markWidth = 5
    // 绘制坐标轴
    this.drawAxis()
    this.drawVoice()
    // this.drawVoice()
    // 绘制网格
    // this.drawDrid()
  },
  // 绘制坐标轴的方法
  drawAxis () {
    var {
      ctx,
      canvas,
      x0,
      y0,
      arrowWidth,
      markWidth,
      space,
      yspace,
      padding
    } = this
    // 绘制x轴
    ctx.beginPath()
    ctx.font = '12px 微软雅黑'
    ctx.strokeStyle = '#c0d2fd'
    ctx.moveTo(x0, y0)
    ctx.lineTo(canvas.width - padding, y0)
    ctx.stroke()
    // 绘制箭头
    // ctx.beginPath()
    // ctx.moveTo(canvas.width + 10, y0)
    // ctx.lineTo(canvas.width - arrowWidth + 10, y0 - arrowHeight)
    // ctx.lineTo(canvas.width - arrowWidth + 10, y0 + arrowHeight)
    ctx.fillStyle = '#c0d2fd'
    // ctx.closePath()
    // ctx.fill()
    // 绘制x轴的刻度
    for (var x = space + padding; x < canvas.width - arrowWidth; x += space) {
      ctx.beginPath()
      ctx.moveTo(x, y0)
      ctx.lineTo(x, y0 - markWidth)
      console.log(x)
      ctx.fillText(xList[(x - space - padding) / space], x - padding / 2, y0 + 20)
      ctx.stroke()
    }

    // 绘制y轴
    ctx.beginPath()
    ctx.moveTo(x0, y0)
    ctx.lineTo(x0, 0 + padding)
    ctx.stroke()
    // 绘制箭头
    // ctx.beginPath()
    // ctx.moveTo(x0, 0)
    // ctx.lineTo(x0 - arrowHeight, arrowWidth)
    // ctx.lineTo(x0 + arrowHeight, arrowWidth)
    // ctx.closePath()
    // ctx.fill()
    // 绘制x轴的刻度
    for (var y = y0 - padding - yspace; y >= 0; y -= yspace) {
      ctx.beginPath()
      ctx.moveTo(x0, y + padding)
      ctx.lineTo(x0 + markWidth, y + padding)
      ctx.fillText((y / yspace) * -10, x0 + markWidth - padding / 2, y + padding + 5)
      ctx.stroke()
    }

    // 绘制原点标题
    ctx.textBaseline = 'top'
    ctx.font = '12px 微软雅黑'
    ctx.textAlign = 'center'
    ctx.fillText('', x0 + 10, y0 + 5)
  },
  // 绘制图谱
  drawVoice () {
    var canvas = document.getElementById('canvas')
    let ctx = canvas.getContext('2d')
    var cwidth = canvas.width
    var cheight = canvas.height - 2
    let meterNum = 1100 / (2.8) // 计算当前画布上能画多少条
    var array = new Uint8Array(analyser1.frequencyBinCount)
    analyser1.getByteFrequencyData(array)
    // console.log(array)
    // console.log(analyser1)
    var step = Math.floor(array.length / meterNum)// 计算从analyser中的采样步长

    // 清理画布
    ctx.clearRect(0, 0, cwidth, cheight)
    Coordinates.drawAxis()
    // 定义一个渐变样式用于画图
    // var gradient = ctx.createLinearGradient(0, 0, 0, 300)
    // gradient.addColorStop(1, '#FFB100')
    // gradient.addColorStop(0.5, '#FF6B29')
    // gradient.addColorStop(0, '#FF692A')
    var color1 = ctx.createLinearGradient(cwidth, cheight - 50, cwidth, cheight - 200)
    color1.addColorStop(0, '#FFB100')
    color1.addColorStop(0.5, '#FF6B29')
    color1.addColorStop(1, '#FF692A')
    // ctx.fillStyle = gradient
    // 对信源数组进行抽样遍历，画出每个频谱条
    // for (var i = 0; i < meterNum; i++) {
    //   var value = array[i * step]
    //   ctx.fillRect(i * 12 , cheight - value + capHeight, meterWidth, cheight)
    // }
    for (var i = 0; i < meterNum; i++) {
      var audioHeight = array[step * i]
      ctx.fillStyle = color1 // 绘制向上的线条
      ctx.fillRect(i * 2.8 + padding1, cheight - padding1, 3, -audioHeight)
      ctx.fillRect(i * 2.8 + padding1, cheight - padding1, 3, -audioHeight)
      // ctx.fillStyle = color2;  // 绘制向下的线条
      // ctx.fillRect(cwidth / 2 + (i * 10), cheight / 2, 7, audioHeight);
      // ctx.fillRect(cwidth / 2 - (i * 10), cheight / 2, 7, audioHeight);
    }
    console.log(this)
    window.requestAnimationFrame(Coordinates.drawVoice)
    // windowObject1.requestAnimationFrame(this.drawVoice())
  },
  // 绘制网格的方法
  // drawDrid(){
  //     var {canvas,space,x0,y0} = this
  //     // 定义当前坐标
  //     var x = x0,y = y0
  //     // 设置虚线
  //     ctx.setLineDash([5,10])
  //     //绘制水平方向的网格线
  //     for(y=y0+space;y>0;y-=space){
  //         //开启路径
  //         ctx.beginPath()

  //         ctx.moveTo(x0,y)
  //         ctx.lineTo(canvas.width,y)
  //         ctx.stroke()
  //     }
  //     //绘制垂直方向的网格线
  //     for(x=x0+space;x<canvas.width;x+=space){
  //         //开启路径
  //         ctx.beginPath()

  //         ctx.moveTo(x,0)
  //         ctx.lineTo(x,y0)
  //         ctx.stroke()
  //     }
  //     ctx.beginPath()
  // }

  // 坐标转换工具
  transform (x = 0, y = 0) {
    var { padding, y0 } = this
    x = x + padding
    y = y0 - y
    return [x, y]
  }
}
export default Coordinates



x轴为音频HZ范围，Y是音量范围

	

有关Echarte
首先简单介绍一下，ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架。
如何获取Echarte
你可以通过以下几种方式获取ECharts。
1.从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建。
2.在 ECharts 的 GitHub 获取。
3.通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”。
4.通过 jsDelivr 等 CDN 引入。
这里推荐在官网处下载Echarst源代码。
官网地址：
https://echarts.apache.org/zh/index.html
Echarte使用步骤 
1、将下载好的Echarte源码放入编译器中，然后将Echarte插件文件引入到HTML文件中。
2、准备好一个具有一定大小的DOM容器。
        .box{
            width: 500px;
            height: 300px;
        }
3、初始化实例对象echarts.init(DOM容器)。
var myChart = echarts.init(document.querySelector(".box"));
4、指定配置项和数据(从官网中下载，点击实例即可)。
以下是随机找的一个实例
var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
5、将配置项给实例对象。
myChart.setOption(option);
如下图所示：
注意：步骤3—步骤5在 .js 文件中编写，也可引用在html文件中。这样，你就可以将一个图表引用进HTML文件中了。
Echarts-基础配置
需要了解的主要配置：
series；xAxis；yAxis；grid ；tooltip；title；legend；color
series
系列列表。每个系列通过 type 决定自己的图表类型
大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
xAxis：直角坐标系 grid 中的 x 轴
boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
yAxis：直角坐标系 grid 中的 y 轴
grid：直角坐标系内绘图网格。修改图表的大小
title：标题组件
tooltip：提示框组件
legend：图例组件
color：调色盘颜色列表
结语
使用Echarte时，一定要先初始化实例对象，然后把配置项给实例对象，否则图表效果就呈现不出来；在指定配置项和数据时也要注意，属性与属性之间用 “,” 隔开，而不是用 “;” ，否则会报错。
本期编辑：廖逸行