HTML5 Canvas元素像素网格（PAPX和PAGEY）答案

【问题标题】：Html5 canvas element pixel grid ( pageX and pageY)HTML5 Canvas元素像素网格（PAPX和PAGEY）
【发布时间】：2019-12-12 16:14:59
【问题描述】：

嘿，我正在尝试使用 html 画布制作绘图应用程序，我将使用鼠标事件跟踪画布的坐标，一切顺利。我将我的画布设置为scr.width 和scr.height 以使其成为全屏板.. 我会将所有鼠标事件存储在一个数组中，以便在画布上绘图现在的问题是，假设我使用1920*1080 分辨率屏幕，如上所述，我的画布将是1920*1080（全屏）我开始存储我所有的鼠标事件并将其推送到后端。现在我以 1440 分辨率打开我的网站。我看不到几幅画。原因：在 1920*1080 中，我跟踪了 1440 以上的点并将其存储在后端。当我拿回来时，从后端到前端以不同的分辨率，我无法绘制所有高于 1440 的点，因为我的屏幕尺寸最大为 1440。

谁能告诉我解决方案？提前致谢。

使用的框架：angular 6

【问题讨论】：

标签： html angular canvas html5-canvas

【解决方案1】：

听起来您需要引入比例因子。保存时应存储画布的原始高度和宽度，即 1920 x 1080。

对于新图纸。

let scale = 1;

为现有图纸计算比例因子。这假设新屏幕分辨率与旧屏幕分辨率成正比。

let scale = currentWidth / originalWidth;  // 1440 / 1920 = 0.75

现在对所有绘图使用比例因子。例如

context.arc(x * scale, y * scale, radius, 0, Math.PI*2, false);

【讨论】：