先定义一个canvas

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

主要绘制函数

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/2ctx3.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)*scalctx3.restore();ctx3.restore();window.requestAnimationFrame(init);}},

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

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

效果大概这样