測試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>