为什么帆布线在一个角度上变粗？

我做了this plnkr来证明我的问题。我不明白为什么当它以一个角度绘制而不是在整个页面上绘制时，绘制的线看起来“更厚”或“更胖”。为什么帆布线在一个角度上变粗？

如何用一致的线宽绘制此形状？

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" href="style.css"> 
    </head> 
    <body> 
    <canvas id="canvas"></canvas> 
    </body> 
    <script src="script.js"></script> 
</html>

CSS：

#canvas { 
    width: 100%; 
    height: 80px; 
    border: 1px solid black; 
}

JS（注意，线宽度只需设置一次 '5' 绘图开始之前）。：

(function() { 
    var canvas = document.getElementById('canvas'); 
    if (!canvas.getContext) { 
     // browser does not support HTML canvas 
     return; 
    } 
    var ctx = canvas.getContext("2d"); 
    ctx.strokeStyle = "#000000"; 
    ctx.lineWidth = 5; 
    ctx.beginPath(); 
    ctx.lineTo(0, canvas.height - 10); 
    var twoThirds= (canvas.width/3) * 2; 
    var oneSixth= (canvas.width/6); 
    ctx.lineTo(twoThirds, canvas.height - 10); 
    ctx.lineTo(twoThirds + oneSixth, 5); 
    ctx.lineTo(canvas.width-3, canvas.height - 10); 
    ctx.stroke(); 
})();

来源

2017-01-10 Dan Schnau

**“不要调整与CSS画布” ** *至少直到你明白如何使它正常工作*使用CSS的时候，但 – Kaiido

[画布的可能重复拉伸正常的，“宽度” /“高度“性质（http://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css-but-normal-with-width-height-properties） – Kaiido

我不是，虽然调整画布？可以肯定的是，当画布宽度是固定像素宽度而不是'100％'时，我验证了问题仍然存在。 –

由于您的尺寸大小，您的画布没有方形“像素”。

你不能看到这条扁线，但对角线显示它。

HTML canvas元素具有需要设置的属性宽度和高度。

这是您的修改代码。

new version

#canvas { 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
}

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

如果你想有一个响应的画布，你需要时，它改变大小更新width和height属性。

来源

2017-01-14 02:34:59 gburton

为什么帆布线在一个角度上变粗？

回答

相关问题