canvas 绘制各种动画效果时，我们经常会使用画布旋转，使绘制上去的元素有旋转的效果。
最近在项目中碰到了很严重的性能问题，经常排查发现是因为绘制批量文字时使用了画布旋转，且每行文字的旋转角度是不一样的，每次绘制前都会去动态的改变画布上下文context的旋转角度值，导致CPU占用太多。
而且发现如果绘制的不是文字元素，而是其他路径类如:rect arc等路径时，cpu并不会飙升。
text旋转后绘制性能低于canvas其他路径类，下面给大家看下测试的结果：
有如下代码：分别绘制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()
