如何在Javascript中有效地加速画布重画？

我从零开始学习HTML5画布对象，所以这个问题的目的仅仅是为了提高知识

您可以在以下网站上实时查看我的项目：

目标是：

找到一种方法来提高画布的速度，只需清除和绘制 画布区域中需要更新的部分

背景：

你能画的每一个东西都是一个多边形，它作为一个对象被追踪。 每个对象都有属性，包括顶点位置、线、边界框和质心 等等

我的做法：

当我需要删除、拖动或更新某个对象时， 我将目标对象传递给名为refresh（poly，callback）的函数n

refresh（）具有可选参数sPoly和callback

使用这两个参数调用函数时，该函数将查找现有对象的边界框与传递的边界框的交点，然后返回需要刷新的对象数组

然后，它将结果向量（toWipe）传递给clear函数，该函数实际清除每个对象边界框的区域

然后，它再次将向量传递给draw函数，该函数将对象拉回

最后运行回调函数

一段代码：

//sPoly is the object representing the actual polygon drawn on screen
refresh: function (sPoly, callback){
        var toWipe;

        //callback is optional
        callback = callback || function () {};

        //if you passed sPoly in the function call refresh() will
        //try to clear just the area of the Canvas that need to be update instead of 
        //clearing everything

        if(sPoly){
            //getBBoxIntersect takes an object, and a tolerance value, and returns an
            //array of objects that will need to be redrawn as consequence of the 
            //redraw of the passed object.

            toWipe = getBBoxIntersect(sPoly, 5);

            //clear all the object in the array toWipe based on each one bounding box.
            self.clear(toWipe);

            //draw again that objects
            self.draw(toWipe);
        }else{
            self.clearAll();
            self.draw(polys);
        }

        callback();

    },

问题在于，清除函数实际上并没有在重画之前清除对象边界框，而是在重画之后。 您可以在快速移动鼠标拖动对象时轻松地重复该错误

有没有办法改进我的方法

如何重复该错误：

显示其中心和边界框的两个多边形

屏幕以灰色显示javascript在拖动时实际重写的区域，以及一系列错误，而这些错误并没有被重写

---

您可以看到，当三角形接近正方形时，刷新功能还会更新正方形周围的区域

清除整个屏幕，并重新绘制每个帧上的所有内容。你将很容易达到每秒60帧的速度。你赌错了马。你的问题是你认为翻译是一个平稳的动作，而它更像是从一帧到下一帧的“传送”。必须清除并重新绘制两个区域：移动前对象所在的区域和移动后对象所在的区域。你的代码很长，所以很难帮助你实现。@GameAlchemist这只适用于好的硬件，大多数互联网用户（也就是世界上的大多数人）都无法访问开发/游戏pc（大多数人甚至没有pc），由于js有一点性能问题，我喜欢这个方向：）即使在最慢的设备Html画布上重新绘制所有形状的速度也足以在刷新周期内重新绘制几十条基本路径。这就是画布的设计目的。一个肮脏的小秘密（！）：即使您尝试清除/重画画布的一部分，浏览器也可能清除/重画整个画布。在“拖动”选定形状时，大多数清除/重画都会进行性能试验。一个有用的学习练习是将两张画布叠在一起。在底层绘制形状，但当用户选择一个形状时，（1）在没有选定形状的情况下重新绘制底部画布（2）在顶层绘制并拖动选定形状，（3）用户完成拖动后，使用bottomContext.drawImage（topCanvas，0,0）将顶部画布绘制到底部画布，并清除顶部画布。