测试canvas绘制旋转文字的性能
canvas 绘制各种动画效果时，我们经常会使用画布旋转，使绘制上去的元素有旋转的效果。
最近在项目中碰到了很严重的性能问题，经常排查发现是因为绘制批量文字时使用了画布旋转，且每行文字的旋转角度是不一样的，每次绘制前都会去动态的改变画布上下文context的旋转角度值，导致CPU占用太多。
而且发现如果绘制的不是文字元素，而是其他路径类如:rect arc等路径时，cpu并不会飙升。
text旋转后绘制性能低于canvas其他路径类，下面给大家看下测试的结果：
有如下代码：分别绘制100个文字，并设置了旋转角度，设置50ms绘制一遍
<html> <head></head> <body>
<div>
<canvas id="canvas" width="1920" height="1080"></canvas> </div>
<script>
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d');
//测试绘制旋转文字的性能
setInterval(drawText, 50);
//测试绘制旋转矩形的性能
// setInterval(drawRect, 50); function drawRect() {
ctx.clearRect(0, 0, 1920, 1080);
for (let i = 0; i <= 500; i += 5) {
ctx.save();
ctx.beginPath();
rotateContext(ctx, 500, 500, i * Math.random());
ctx.fillStyle = "red";
ctx.rect(250, i + 250, 20, 10);
ctx.fill();
ctx.restore();
}
}
function drawText() {
ctx.clearRect(0, 0, 1920, 1080);
for (let i = 0; i <= 500; i += 5) {
ctx.save();
ctx.beginPath();
rotateContext(ctx, 500, 500, i * Math.random());
ctx.fillStyle = "red";
ctx.fillText("反倒是的", 250, i + 250);
ctx.restore();
}
}
//确保是以(x,y)为中心进行旋转，而不是简单的以画布原点旋转
function rotateContext(ctx, x, y, degree) {
ctx.translate(x, y);
ctx.rotate(degree * Math.PI / 180);
ctx.translate(-x, -y);
} </script>
</body> </html>
绘制效果如下：
可以观察浏览器里面的性能指标，已经接近100%
而如果我们绘制的是100个矩形，同样设置旋转角度
把上面代码段中的drawRect循环绘制的代码行t放开，注释掉drawText循环绘制。再看绘制效果，和drawText的效果是一样的。
而此时的在浏览器里观察cpu占用的就非常低
至于为什么有这个问题，还需要深入学习canvas绘制文字的方式，希望有研究的同学能够分享给大家！
测试canvas绘制旋转文字的性能的更多相关文章
- C#利用GDI+绘制旋转文字等效果
C#中利用GDI+绘制旋转文本的文字,网上有很多资料,基本都使用矩阵旋转的方式实现.但基本都只提及按点旋转,若要实现在矩形范围内旋转文本,资料较少.经过琢磨,可以将矩形内旋转转化为按点旋转,不过需要经 ...
- canvas一周一练 -- canvas绘制立体文字（2）
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas绘制旋转图形
将绘制到canvas上的要素进行旋转: 1.绘制时,通过操作画布的坐标轴状态:平移画布原点,旋转坐标轴等,达到旋转图形的目的 2.操作操作DOM元素,直接旋转canvas画布 操作画布的坐标轴状态: ...
- HTML5 Canvas 绘制旋转45度佛教万字
效果如下: 代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Cont ...
- HTML 5：绘制旋转的太极图
HTML: <!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title& ...
- 第165天：canvas绘制圆环旋转动画
canvas绘制圆环旋转动画——面向对象版 1.HTML 注意引入Konva.js库 <!DOCTYPE html> <html lang="en"> &l ...
- 关于canvas绘制大转盘并旋转
O(∩_∩)O包子不才,最近磕磕巴巴写了一个大转盘的效果.现在想说一下整个的思路部分,要是有设么不对的还请多多指教,期待共同成为优秀的前端~~大转盘整个思路: 绘制整个转盘 编写一个随机数,用来当接口 ...
- 【朝花夕拾】Android自定义View篇之（三）Canvas绘制文字
前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10968358.html],谢谢! 前面的文章中在介绍Canvas的时候,提到过后续单独讲Can ...
- canvas绘制文字
绘制字体时可以使用fillText方法或者strokeText方法. fillText方法用填充的方式来绘制字符串 context.fillText (text, x,y,[maxwidth]); s ...
随机推荐
- FJOI2019 游记[大概是考完会解封？]
Day -1 不知不觉就快省选了啊...从NOIP的爆炸到现在也已经过了两个月了啊... 因为高一没有封闭[划] 所以这些内容是翘了课[划]在机房写的 嘛...感觉自己还有好多东西不会啊……这两天一直 ...
- 洛谷 P3757 [CQOI2017]老C的键盘
题面 luogu 题解 其实就是一颗二叉树 我们假设左儿子小于根,右儿子大于根 考虑树形\(dp\) \(f[u][i]\)表示以\(u\)为根的子树,\(u\)为第\(i\)小 那么考虑子树合并 其 ...
- 分布问题（二元，多元变量分布，Beta，Dir）
这涉及到数学的概率问题. 二元变量分布: 伯努利分布,就是0-1分布(比如一次抛硬币,正面朝上概率) 那么一次抛硬币的概率分布如下: 假设训练数据如下: 那么根据最大似然估计(MLE),我 ...
- GeneXus学习笔记——创建一个知识库 哈哈哈哈！
终于想到写什么东西了(绝对不是因为懒 好吧 信我) 那么进入正题 我们写项目的时候 遇到一些问题啥的 总会听到大佬说:“这有什么难的 说到底不就是简单的增删改查么" 然后我们就会露出 Σ ...
- 关于MatlabGUI清除WorkSpace的用法
近日在调试Matlba GUI程序时,因为不想退出程序后手动Clear All来清理,又需要在过程中对WorkSpace进行清理,否则会引用之前的结果导致错误,找了很多资料,国内的论坛什么的都说用Cl ...
- Win10 VS2015 静态编译Qt5.6.2源码
由于VS2015需要CRT等拓展组件,因此把内部编写的工具软件以静态发布,固需要编译Qt源码.Qt5.6.2版本,VS2015,Win10 1.安装python,perl,下载jom 2.改文件com ...
- 发布.net 4.0的站点到IIS7.5下时无法访问
现象: 初始发布.net 4.0站点到IIS7.5下时,各种配置都完毕的情况下依旧无法访问.首页显示站点目录结构(注:开启目录结构访问后会显示这个错误,否则会提示开启),访问次级目录提示:Handle ...
- Linux笔记-Linux命令初解2
在看linux过程中,文件属性管理是一个难点,因而作为初学者的我来说,我直接将其放在后面来慢慢研究,因而我个人觉得先学习后面一些知识点之后,回过头来将一些你所不懂的去解透,这是极好的意见事情.对了,我 ...
- 搭建nginx代理，为前端页面跨域调用接口
前端同学因开发需要,本地搭建的服务需要调用其它域名的接口,在帮助正确配置后,已能正常使用. 这里写一篇博客,记录一下. 前端页面地址为127.0.0.1:9813/a.html 接口地址http:// ...
- android子线程更新UI
参考:https://www.cnblogs.com/joy99/p/6121280.html 子线程是不能直接更新UI的.Android实现View更新有两组方法,分别是invalidate和pos ...