HTML5画布上下文梯度非常昂贵

is HTML5 canvas context gradient expensive?

本文关键字:非常 上下文 HTML5      更新时间:2023-09-26

每次鼠标移动时,我都需要在画布上绘制一个径向渐变(好吧,一个用径向渐变填充的圆,圆锥体居中于圆内),中心位于当前鼠标位置。

似乎每次收到鼠标移动事件时,我都需要创建一个新的径向渐变对象,因为渐变的中心必须设置为鼠标位置。或者我可以使用某种变换来移动现有的渐变,以便if在正确的位置填充我的圆吗?

换句话说,每次创建一个新的渐变对象都很昂贵吗?有人有这方面的经验吗?

我没有这方面的经验,但我确信为每一次鼠标移动绘制一个新的渐变是昂贵的。相反,您可以尝试翻译或转换整个画布上下文以实现您的目标。有关如何翻译上下文的更多详细信息,请参阅下面的链接。

http://www.html5canvastutorials.com/advanced/html5-canvas-transform-translate-tutorial/