Question

我将画布定义为<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();

不幸的是，该线似乎开始只有几个px太低。虽然它将画布完全留在底部中心而不是在右下角之前结束。此外，该线似乎至少3px宽，可怕的抗锯齿。

我正在使用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>

画布外的线条

1 个答案: