Canvas性能优化

最新推荐文章于 2024-06-26 04:13:17 发布

七毛six

最新推荐文章于 2024-06-26 04:13:17 发布

阅读量5k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_34309704/article/details/81478695

版权

1、Canvas是html5新增的画布元素，允许我们使用Js来绘制图形

2、Canvas最常见的用途是渲染动画。

渲染动画的基本原理无非是反复的擦除和重绘。

为了动画的流畅，留了一帧的时间，我们需要在16ms完成游戏逻辑的处理，对象位置、状态的计算以及把他们画出来。一旦消耗时间多了，用户就会感觉卡顿。所以提高动画的性能很重要

3、优化渲染性能总体思路：

4、Canvas API都在其上下文对象context上调用的。

	var context = drawing.getContext("2d");

①context是一个状态机。

②几乎所有的渲染操作都是在context上完成的，最终的效果与context本身的状态有关系，例如：

context.lineWidth = 5;             //矩形边框宽度
context.strokeStyle = "red";       //矩形边框颜色
context.strokeRect(50,50,80,80);   //绘制一个矩形

以上代码的第一二行必须放在第三行上边，要不然不起作用。

对context.lineWidth的赋值开销远远大于对一个普通对象的赋值开销。因为canvas上下文不是一个普通的对象。。当调用context.lineWidth=5时，浏览器需要立刻做一些事情，这样你下次调用

关注