极客观点
项目管理
HarmonyOS
<!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>不知道为什么,运行一会儿之后,旋转就会变卡,怎么都想不到原因,有高手能看下吗?
可能是你的ctx.save调用的问题，被压入画布栈的太多了，超出了内存，建议把上一次绘画逻辑抽出来直接重绘