Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.4k views
in Technique[技术] by (71.8m points)

为什么我这段canvas绘图会在一到两分钟之后变慢然后持续变慢,最后很卡很卡的样子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div>
  <canvas id="water" height="0" width="0" ref="canvas"></canvas>
  <!--        <img ref="pumpImg" src="https://cdn.gosafenet.com/static/images/bdrc/pump.png" style="display: none"/>-->
  <!--        <img ref="pumpActiveImg" src="https://cdn.gosafenet.com/static/images/bdrc/pumpActive.png"-->
  <!--             style="display: none"/>-->
  <img ref="pumpNormal" id="pump" src="https://cdn.gosafenet.com/static/images/board/waterPumpStatus/pumpNormal.png"
      style="display: none"/>
  <img ref="pumpWarn" src="https://cdn.gosafenet.com/static/images/board/waterPumpStatus/pumpWarn.png"
      style="display: none"/>
  <img ref="pumpDanger" src="https://cdn.gosafenet.com/static/images/board/waterPumpStatus/pumpDanger.png"
      style="display: none"/>
  <img ref="pumpOffline" src="https://cdn.gosafenet.com/static/images/board/waterPumpStatus/pumpOffline.png"
      style="display: none"/>
  <img ref="fanNormal" id="fans" src="https://cdn.gosafenet.com/static/images/board/waterPumpStatus/fanNormal.png"
      style="display: none"/>
  <img ref="fanWarn" src="https://cdn.gosafenet.com/static/images/board/waterPumpStatus/fanWarn.png"
      style="display: none"/>
  <img ref="fanDanger" src="https://cdn.gosafenet.com/static/images/board/waterPumpStatus/fanDanger.png"
      style="display: none"/>
  <img ref="fanOffline" src="https://cdn.gosafenet.com/static/images/board/waterPumpStatus/fanOffline.png"
      style="display: none"/>
</div>
</body>
</html>
<script>
  let canvas = document.getElementById('water')
  let fans = document.getElementById('fans')
  let pump = document.getElementById('pump')
  let fansRotate = 0;
  let dashList = [10, 8]
  let offset = 0
  let animationFrame=null;
  let ctx = canvas.getContext('2d');

  setCanvasSize();
  paint();
  paint(); paint();

  function paint() {
    ctx.clearRect(0, 0, 1000, 291); // 清空画布
    ctx.drawImage(pump, 0, 0, 1000,291);
    ctx.save()

    //绘制旋转的风扇


    fansRotate +=3
    if(fansRotate>3000){
      fansRotate=0
    }

    ctx.translate(412, 151);
    ctx.rotate(fansRotate*Math.PI/180)
    ctx.translate(-412, -151);
    // ctx.drawImage(fanImgUrl, 383, 126,124,124,0,0,100,100)
    ctx.drawImage(fans, 0, 0, 124, 124, 387, 126, 50, 50)

    ctx.restore()

    ctx.beginPath();
    ctx.strokeStyle = "rgba(12,85,76,0.9)"
    ctx.lineWidth = 20;
    ctx.setLineDash(dashList);
    ctx.moveTo(58, 153);
    ctx.lineTo(340, 153);
    ctx.moveTo(470, 238);
    ctx.lineTo(528, 238);
    ctx.moveTo(586, 238);
    ctx.lineTo(950, 238);
    offset -= 1
    if (offset < -36) {
      offset = 0
    }
    ctx.lineDashOffset = offset;
    ctx.stroke();
    ctx.save()
    ctx.beginPath()
    ctx.stroke();

    requestAnimationFrame(paint)
  }

  function setCanvasSize() {
    canvas.width = 1000;
    canvas.height = 291
  }
</script>

不知道为什么,运行一会儿之后,旋转就会变卡,怎么都想不到原因,有高手能看下吗?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

可能是你的ctx.save调用的问题,被压入画布栈的太多了,超出了内存,建议把上一次绘画逻辑抽出来直接重绘


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...