canvas绘制扫描图

先定义一个canvas

<div class="canFa">
          <canvas width="380" id="can3"></canvas>
        </div>

1
2
3
4

主要绘制函数

var chosHeight = document.getElementsByClassName("canFa")[0].children[0].clientHeight;
    var chosWidth = document.getElementsByClassName("canFa")[0].children[0].clientWidth;
    var threeHeight; //宽高对比选择
    if (chosHeight > chosWidth) {
      threeHeight = chosWidth;
    } else {
      threeHeight = chosHeight;
    }
    this.threeHeight = threeHeight;
    // canvas扫描盘
    this.leftCenterCanvas(threeHeight);
    
//threeHeight 就是canvas外层canFa的宽高对比，谁小用谁，为了让下面的canvas不超界
leftCenterCanvas(threeHeight) {
      var canvas3 = document.getElementById("can3");
      var ctx3 = canvas3.getContext("2d");
      var leftCenter = new Image();
      var sector = new Image();
      canvas3.height = threeHeight;
      leftCenter.src = this.leftCenter; //背景图
      sector.src = this.sector; //指针
      sector.width = 82;
      var CFG = {
        perDeg: 1
      };
      var deg = 0,
        scal = 0;
      leftCenter.onload = function() {
        scal = threeHeight / leftCenter.height;
        init();
      };

      // 重画重删 大概就是定义角度，位置然后绘制
      function init() {
        // ctx3.clearRect(0, 0,420,185)
        ctx3.clearRect(0, 0, 380, threeHeight);
        ctx3.save();
        // ctx3.drawImage(leftCenter,40,0)
        ctx3.drawImage(
          leftCenter,
          0,
          0,
          leftCenter.width,
          leftCenter.height,
          canvas3.width / 2 - (leftCenter.width * scal) / 2,
          0,
          leftCenter.width * scal,
          leftCenter.height * scal
        );
        ctx3.translate(190, (leftCenter.height * scal) / 2 + 4 * scal); //190是因为宽写的380/2
       
        ctx3.save();
        deg = deg + CFG.perDeg;
        ctx3.rotate((Math.PI / 180) * deg);

        // ctx3.drawImage(sector,0,-63)
        ctx3.drawImage(
          sector,
          0,
          0,
          sector.width,
          sector.width,
          0,
          -sector.width * scal,
          sector.width * scal,
          sector.width * scal
        );
        // -3*scal,-(-5+sector.width)*scal
        ctx3.restore();
        ctx3.restore();
        window.requestAnimationFrame(init);
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

底盘是张图
扫描针也是张图
这个函数主要是让扫描针定义到底盘中间，然后旋转，其实就是做个动画效果

 leftCenter: require("@/common/image/leftCenter.png"), //左下底盘
 sector: require("@/common/image/sector.png"), //左下扫描指针
1
2

效果大概这样