canvas画布简单操作之一

缩放比例

1. 绘画文字会出现模糊的现象，是因为没有缩放导致的问题。（简单概括为1->1的视图不会出现模糊，1->2 的视图就会出现模糊，现在就是要搞成同等比例的。）

   (function () {
      const c = document.createElement("canvas"),
        ctx = c.getContext("2d"),
        dpr = window.devicePixelRatio || 1,
        bsr = ctx['webkitBackingStorePixelRatio'] ||
          ctx['mozBackingStorePixelRatio'] ||
          ctx['msBackingStorePixelRatio'] ||
          ctx['oBackingStorePixelRatio'] ||
          ctx['backingStorePixelRatio'] || 1;

      return dpr / bsr;
    })();

    this.ctx.scale(ratio, ratio);
    // 向下取整
    const floor = (x) => Math.floor(x);
    // 设置缩放后的尺寸，入参是dom尺寸
    const translateRatio = (x) => {
       return floor(x * ratio);
    }

解释：

1. 先创建一个canvas，计算devicePixelRatio，同时获取到webkitBackingStorePixelRatio值，做一个运算，获取到相应的缩放比例。

2. 直接对视图进行缩放。

总结：完成了以上的设置，文字就不会出现模糊的现象了。绘制的时候记得要对尺寸进行转换。

 

绘制线条

绘制简单的线条，线条可以设置两端的样式，连接处的样式，线条本身的样式（可以为虚线/实线），填充色，边框色，线条宽度。

    this.ctx.beginPath();
    this.ctx.moveTo(cursorX, cursorY);
    this.ctx.lineTo(cursorX, cursorY + contentHeight);
    this.ctx.lineTo(canvasWidth - x, cursorY + contentHeight);
    this.ctx.lineWidth = 1;
    this.ctx.stroke();

    this.ctx.beginPath();
    this.ctx.setLineDash([8, 8]);
    this.ctx.moveTo(x, y);
    this.ctx.lineTo(x + contentWidth + statusWidth, y);
    this.ctx.strokeStyle = "red";
    this.ctx.stroke();

解释：

1.  分别是两组边框线条的绘制代码，实线/虚线。

2. 从beginPath开始，到stroke结尾。（stroke/fill，边框/区域，不同的方式需要设置不同的样式，才能生效）

3. 实线与虚线转换间需要重新设置setLineDash，不然会出现混乱。

3. closePath是闭环使用的。

 

绘制文字

一般绘制文字会出现模糊的现象，但是用了缩放比例就不会出现了。

文字可以设置font（粗细，字体大小，样式，其余可以自己参考css的font），fillStyle（文字颜色），textAlign（文字水平类型），textBaseline（文字的垂直类型）。

    this.ctx.font = `${translateRatio(12)}px sans-serif`;
    this.ctx.fillStyle = '#000000'; // 文字颜色
    this.ctx.textAlign = 'right'; // 水平对其
    this.ctx.textBaseline = 'top'; // 垂直对其
    this.ctx.fillText(text, x, y);

解释：

1. fillStyle可以填充文字的颜色，strokeStyle可以设置文字边框的颜色，需要注意，不然你会发现你的文字内部颜色是黑色的，贼丑。（坑）

2. 文字的大小也需要经过缩放比例的转换。

总结：文字大小转换，fillText/storkeText使用。

 

圆

绘制简单的圆，半圆。

   this.ctx.arc(x + value - radius, y + radius, radius, Math.PI / 2, -Math.PI / 2, true);

解释：

1. 使用arc的方法绘制圆。参数分别是圆心的x，y值，半径，起始位置（从x开始计算，四象限），结束位置，是否顺时针绘画。

 

柱状图

绘制柱状图，需要使用渐变。

    // 柱状图
    this.ctx.beginPath();
    this.ctx.moveTo(x, y); // 起点
    this.ctx.lineTo(x + value - radius, y); // 二点
    // 画半圆 x y 半径
    this.ctx.arc(x + value - radius, y + radius, radius, Math.PI / 2, -Math.PI / 2, true);
    // 三点
    this.ctx.lineTo(x + value - radius, y + radius * 2);
    // 终点
    this.ctx.lineTo(x, y + radius * 2);
    // 渐变
    const linearGradient = this.ctx.createLinearGradient(x, y, x + value + radius, y);
    linearGradient.addColorStop(0, startColor);
    linearGradient.addColorStop(1, endColor);
    this.ctx.fillStyle = linearGradient;
    this.ctx.fill();

    // 填写文字
    this.ctx.beginPath();
    this.ctx.font = `${translateRatio(14)}px sans-serif`;
    this.ctx.fillStyle = themeColor; // 文字颜色
    this.ctx.textAlign = 'left'; // 水平对其
    this.ctx.textBaseline = 'top'; // 垂直对其
    this.drawText(x + value + translateRatio(textMargin), y, text);

解释：

1.  绘制线条，绘制半圆。即可完成柱状图的绘制。

2.  线性渐变，需要单独申明一个线性渐变器，参数是开始位置的x,y值，结束位置的x，y值。（这里只是简单的从左往右渐变，可以考虑向360方向随意渐变）

3. 如果想要径向渐变，需要使用createRadialGradient。

总结：柱状图绘制完成。渐变操作。

 

总结

到此应该基本能画出来简单的canvas了。