功能

录屏过程中的涂画功能允许用户在录制屏幕操作的同时，实时添加注释和高亮显示，以增强信息的传达和观众的理解。

效果

[video(video-V4tvasH8-1719145102181)(type-bilibili)(url-player.bilibili.com/player.html…)]

代码实现

1、利用HTML5的Canvas元素实现一个自由涂画的功能，允许用户在网页上进行手绘创作。 2、Electron无边框透明全屏置顶窗口

注意

在使用canvas使用鼠标绘制时，存在偏移、画笔粗细不一，问题在于 devicePixelRatio 的设置；devicePixelRatio表示设备物理像素和CSS像素的比率。当这个比率不为1时，如果不进行适当处理，Canvas绘制的内容可能会出现偏移和粗细不均。 解决：根据devicePixelRatio 参数比 重新设置canvas 的宽高

		// 设置实际大小
		canvas.width = canvas.clientWidth * pixelRatio
		canvas.height = canvas.clientHeight * pixelRatio