【每日积累】Js H5canvas绘制通用组件

需求点：绘制对应最近五日主力减仓

用canvas直接绘制封装成组件方便后续使用，好处就是高度定制化，麻烦的就是得需要计算对应的数据。

话不多直接上代码，和对应效果图！ 

 代码如下：

function draw(data) {

    var adapterProp = 1
    let all = document.querySelector("body");
    all.style.padding = "0px";
    all.style.margin = "0px";
    let canvas = document.querySelector('canvas');
    let clientWidth = all.clientWidth;
    canvas.setAttribute('width', clientWidth);



    let currentHeight = canvas.height;
    let currentWidth = canvas.width;

    // 获取画布对象

    let ctx = canvas.getContext('2d');

    var strokeColor = "#DDDDDD"; // 框线颜色值

    ctx.linewidth = 2;
    ctx.strokeColor = strokeColor;
    ctx.beginPath(); //开始绘制

    ctx.drawDashedLine(0, isInteger(currentHeight * 0.5), currentWidth, isInteger(currentHeight * 0.5), 5);
    let gap = currentWidth / 10;
    let maxValue = 0; //设定最大值


    ctx.font = 12 + "px Arial"; // 设定字体样式

    ctx.fillStyle = "#6d6969"; //填充色
    ctx.textAlign = "center"; //文字对齐方式


    var totalNum = 0;

    // console.log(data.results)
    let res = data.results;
    for (var i = 0; i < res.length; i++) {
        console.log(res[i])
        var txt = res[i][0].toString().substr(4, 2) + "-" + res[i][0].toString().substr(6, 2); //对后台返回的时间格式进行处理
        ctx.fillText(txt, isInteger((i * 2 + 1) * gap), isInteger(currentHeight * 0.5 +