HTML5 canvas 转换 - 监控像素到 canvas 点

Question

由于我还没有找到任何相关信息，我想知道我是否遗漏了一件简单的事情：

canvas#cvs1 {
    width: 32px;
    height: 32px;
}


var context = cvs1.getContext("2d");
context.beginPath();
context.moveTo(0, 0);
context.lineTo(16, 32);
context.lineTo(32, 32);
context.closePath();

如果我在 canvas 上画一个三角形，三角形大约是 3x3 像素（而不是像我想的那样是 32x32）那么我错过了什么 context.lineTo(32, 32); 的坐标不反映来自 canvas?

的 width/heigth 的像素

Answer 1

不要使用 CSS 来调整 canvas 的大小。使用 CSS "shrinks" 调整 canvas 上的每个像素并生成迷你三角形。

// the canvas is 300px by 150px size by default
// This CSS causes each pixel to be squished in size to
//     32/300 wide and 32/150 high
canvas#cvs1 { width: 32px; height: 32px; }

改为调整 canvas 元素本身的大小：

cvs1.width=32;
cvs1.height=32;

HTML5 canvas 转换 - 监控像素到 canvas 点

HTML5 canvas conversion - monitor pixel to canvas point

html5-canvas