测试canvas绘制旋转文字的性能

时间 2020-06-12

原文原文链接

　　canvas 绘制各类动画效果时，咱们常常会使用画布旋转，使绘制上去的元素有旋转的效果。html

　　最近在项目中碰到了很严重的性能问题，常常排查发现是由于绘制批量文字时使用了画布旋转，且每行文字的旋转角度是不同的，每次绘制前都会去动态的改变画布上下文context的旋转角度值，致使CPU占用太多。canvas

　　并且发现若是绘制的不是文字元素，而是其余路径类如:rect arc等路径时，cpu并不会飙升。浏览器

　　text旋转后绘制性能低于canvas其余路径类，下面给你们看下测试的结果：dom

　　有以下代码：分别绘制100个文字，并设置了旋转角度，设置50ms绘制一遍性能

 1 <html>
 2 
 3 <head></head>
 4 
 5 <body>
 6     <div>
 7         <canvas id="canvas" width="1920" height="1080"></canvas>
 8 
 9     </div>
10     <script>
11  let canvas = document.getElementById("canvas"); 12  let ctx = canvas.getContext('2d'); 13         //测试绘制旋转文字的性能
14  setInterval(drawText, 50); 15         //测试绘制旋转矩形的性能
16         // setInterval(drawRect, 50);
17 
18         function drawRect() { 19  ctx.clearRect(0, 0, 1920, 1080); 20             for (let i = 0; i <= 500; i += 5) { 21  ctx.save(); 22  ctx.beginPath(); 23  rotateContext(ctx, 500, 500, i * Math.random()); 24  ctx.fillStyle = "red"; 25  ctx.rect(250, i + 250, 20, 10); 26  ctx.fill(); 27  ctx.restore(); 28  } 29  } 30         function drawText() { 31  ctx.clearRect(0, 0, 1920, 1080); 32             for (let i = 0; i <= 500; i += 5) { 33  ctx.save(); 34  ctx.beginPath(); 35  rotateContext(ctx, 500, 500, i * Math.random()); 36  ctx.fillStyle = "red"; 37  ctx.fillText("反却是的", 250, i + 250); 38  ctx.restore(); 39  } 40  } 41         //确保是以(x,y)为中心进行旋转，而不是简单的以画布原点旋转
42         function rotateContext(ctx, x, y, degree) { 43  ctx.translate(x, y); 44  ctx.rotate(degree * Math.PI / 180); 45  ctx.translate(-x, -y); 46  } 47 
48     </script>
49 </body>
50 
51 </html>

　　绘制效果以下：学习

　　能够观察浏览器里面的性能指标，已经接近100%测试

　　而若是咱们绘制的是100个矩形，一样设置旋转角度动画

　　把上面代码段中的drawRect循环绘制的代码行t放开，注释掉drawText循环绘制。再看绘制效果，和drawText的效果是同样的。spa

　　而此时的在浏览器里观察cpu占用的就很是低3d

　　至于为何有这个问题，还须要深刻学习canvas绘制文字的方式，但愿有研究的同窗可以分享给你们！