createJS 坐标与 canvas 不匹配

Question

我有一个 canvas，宽度为 1280 像素，高度为 800 像素。当我创建一个文本对象并将坐标设置为 x:100 和 y:100 时；它显示如图所示的文字。 in this picture.

x和y值没有像素单位吗？如果不是，如何将其更改为像素？

Answer 1

HTML canvas 元素有自己的宽度和高度：

<canvas id="canvas" width="300" height="300">

您也可以在 JavaScript 中更改：

var can = document.getElementById('canvas');
can.width = 500; // the default is 300
can.height = 500; // the default is 150

这与 canvas 的 CSS 宽度和高度分开。此行将它们都设置为：

<canvas id="canvas" width="300" height="300" style="width:300px; height:500px"></canvas>

尝试同时设置两者，看看是否得到您想要的结果。有可能你只设置了CSS，没有设置canvas.width和height，还是300和150的小默认值！

在高密度显示器上，许多应用程序将 canvas.width 和 height 设置为某个值（例如 100），并将 CSS 数字设置为该值的一半 (50)。他们这样做是为了使 canvas 像素更密集。如果这听起来像您所需要的，您将需要阅读 "canvas pixel density."

createJS coordinates mismatch with canvas