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();

如果我在画布上画一个三角形，那么三角形大约是3x3像素（而不是像我那样的32x32）所以我错过了context.lineTo(32, 32);的坐标不反映宽度/的像素画布的高度？

Answer 1

不要使用CSS来调整画布大小。使用CSS调整大小＆＃34;缩小＆＃34;画布上的每个像素都会产生迷你三角形。

// 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画布转换 - 监视像素到画布点

1 个答案: