javascript - Canvas 外的线条

Question

我将 Canvas 定义为 <canvas id="maincanvas" class="canvas"></canvas>与风格

.canvas {
    width: 1000px;
    height: 750px;
    border: 1px dotted;
}

然后我尝试从左上角到右下角画一条线:

function GenerateSym() {
    var c = document.getElementById("maincanvas");  
    var ctx = c.getContext("2d");
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(5, 5);
    ctx.lineTo(995, 745);
    ctx.stroke();

不幸的是，线条似乎开始时太低了几像素。虽然它将 Canvas 完全留在底部中心，而不是在右下角之前结束。此外，这条线似乎至少有 3 像素宽，抗锯齿效果很差。

我在 Firefox 58 上运行 Mint 18。谢谢!

Answer 1

您不能使用 CSS 样式来调整 Canvas 元素的大小，否则您将遇到此问题。 Canvas DOM 元素具有属性 width 和 height ，它们等同于属性 "width=.."和 "height=.."。正如这里所说:Canvas width and height in HTML5 . 所以正确的做法是:

.canvas{ style: 1px dotted;}

和

<script>
var c = document.getElementById("maincanvas");  
var ctx = c.getContext("2d");
c.width= 1000;
c.height= 750;
ctx.beginPath();
ctx.lineWidth = 1;
ctx.moveTo(5, 5);
ctx.lineTo(995, 745);
ctx.stroke();</script>