canvas 的动画卡顿问题(运行一段时间卡顿) |
您所在的位置:网站首页 › led屏播放视频卡顿不流畅 › canvas 的动画卡顿问题(运行一段时间卡顿) |
最近公司有项目需要写纯canvas组件,所以花了一段时间学习了下canvas。 canvas这东西上手简单,精通难。而且也很少纯canvas写,所以网上参考的内容也比较少。 这里记录我用canvas遇到的一个坑,canvas运行一段时间卡顿。 为了给你们省时间,我先直接放解决办法。想看问题分析的步骤和方法可以看下去。canvas中使用的save()数量和restore()的数量一致就能解决问题。 记得点个赞再走 问题描述:canvas写的动画效果,刚运行是很正常,但是一段时间(差不多2分钟)后速度会很慢,这里直接上图看效果。 刚运行时: 运行一段时间(差不多2分钟)后 对,你没看错,这就是现在的运行速度 可以看到,运行一段时间后,速度变得非常慢,那么先分析下代码: export default { name: "round", data() { return { radian: 10, //弧度 } }, mounted() { this.draw() }, methods: { draw() { // 以下变量都不能修改 let tx = 0 let isbig = true let arcRound = 0 let arcRound1 = 0 let arcRound2 = 0 let alpha = 0 /** @type {HTMLCanvasElement} */ const round = document.getElementById("round") const ctx = round.getContext("2d") let name = () => { alpha += 0.008 ctx.globalAlpha = alpha ctx.save() ctx.clearRect(0, 0, round.clientWidth, round.clientHeight) //动画 if (isbig) { tx = tx + 1 } else { tx = tx - 0.3 } // 大圈 ctx.beginPath() ctx.strokeStyle = "#5a7cfb" ctx.lineWidth = 3 ctx.translate(round.clientWidth / 2, round.clientHeight / 2) ctx.rotate(((arcRound = 0.4 + arcRound) * Math.PI) / 180) ctx.arc(0, 0, (round.clientHeight / 100) * 50, 0, Math.PI * 2) ctx.setLineDash([50, 150, 50]) ctx.stroke() ctx.restore() ctx.save() // 中圈 ctx.beginPath() ctx.strokeStyle = "#5a7cfb" ctx.lineWidth = 3 ctx.translate(round.clientWidth / 2, round.clientHeight / 2) ctx.rotate(((arcRound1 = arcRound1 - 0.5) * Math.PI) / 180) ctx.arc(0, 0, (round.clientHeight / 100) * 48, 0, Math.PI * 2) ctx.setLineDash([2, 80, 50]) ctx.stroke() ctx.restore() ctx.save() // 小圈 ctx.beginPath() ctx.strokeStyle = "#5a7cfb" ctx.lineWidth = 3 ctx.translate(round.clientWidth / 2, round.clientHeight / 2) ctx.rotate(((arcRound2 = arcRound2 + 0.15) * Math.PI) / 180) ctx.arc(0, 0, (round.clientHeight / 100) * 46, 0, Math.PI * 2) ctx.setLineDash([50, 150, 80]) ctx.stroke() ctx.restore() ctx.save() // 小圈 ctx.beginPath() ctx.strokeStyle = "#5a7cfb70" ctx.lineWidth = 1.5 ctx.translate(round.clientWidth / 2, round.clientHeight / 2) ctx.rotate(((arcRound2 / 2) * Math.PI) / 180) ctx.arc(0, 0, (round.clientHeight / 100) * 46, 0, Math.PI * 2) ctx.setLineDash([70, 60]) ctx.stroke() ctx.restore() ctx.save() window.requestAnimationFrame(name) } window.requestAnimationFrame(name) }, }, } #round { background-color: #333; }解决这个问题,起初时没有任何头绪,翻阅百度谷歌都没有找到解决办法,只好自己又去分析问题。 分析问题:恰巧,分析问题分析到块下班了,准备关电脑下班了,结果,在关闭浏览器标签页的时候发现了问题,平常点击关闭按钮就会瞬间关闭的标签页,在我关闭正在写的页面的时候居然卡了2秒左右才关闭,我又打开页面试了下发现,页面刚打开是关闭,时瞬间关闭的,但是运行到canvas动画速度变慢的时候关闭,就会出现先卡顿一下再关闭的情况。 所以,我就看了下浏览器的性能占用,下面直接放图。 刚运行时的内存占用:30MB
|
今日新闻 |
点击排行 |
|
推荐新闻 |
|
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |