測試canvas繪製旋轉文字的效能
阿新 • • 發佈：2018-11-12
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(); 22ctx.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的效果是一樣的。
而此時的在瀏覽器裡觀察cpu佔用的就非常低
至於為什麼有這個問題，還需要深入學習canvas繪製文字的方式，希望有研究的同學能夠分享給大家！