javascript - html/javascript 中的画布线模糊

Question

一切都说“等宽线没有这个问题”，但它们确实
是我的代码：

var c = document.getElementById("clamvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 2;
ctx.moveTo(0, 0);
ctx.lineTo(1728, 877);
ctx.stroke();

canvas
{
	width:90%;
	height:90%;
	padding: 0;
    margin: auto;
    display: block;
	border:5px solid #000000;
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

<canvas id="clamvas"></canvas>

Answer 1

那是因为您正在设置width并height通过 css; 这只是拉伸画布元素，包括它的内容。

使用width和height属性来正确调整画布元素的大小：

var c = document.getElementById("clamvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 2;
ctx.moveTo(0, 0);
ctx.lineTo(1728, 877);
ctx.stroke();

canvas {
    padding: 0;
    margin: auto;
    display: block;
    border:5px solid #000000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

<canvas id="clamvas" wdith="200" height="200"></canvas>