在画布上画一条二等分的对角线？答案

【问题标题】：Drawing a bisecting diagonal line in canvas?在画布上画一条二等分的对角线？
【发布时间】：2015-01-04 10:43:38
【问题描述】：

HTML：

(canvas class="col-md-1 myCanvas")(/canvas)

CSS：

.myCanvas {
        height: 400px;
        width: 400px;
        border: 1px solid black;
}

JavaScript：

$(document).ready(function(){

        var canvas = $('.myCanvas');
        var context = canvas.get(0).getContext('2d');

        var height = canvas.height();
        var width = canvas.width();


        context.beginPath();
        context.moveTo(0,0);
        context.lineTo(width, height);
        context.stroke();
});

如您所见，它似乎实际上并没有创建一条从一个角落延伸到另一个角落的对角线。正确平分正方形的正确论点是什么？

【问题讨论】：

标签： javascript jquery canvas

【解决方案1】：

当您使用 CSS 格式化画布时，画布的内部坐标系不会改变。 canvas.width 和 canvas.height 保持原样。改变的是 HTML 文档中画布的输出。画布在一个轴上被拉伸并在另一个轴上被裁剪，这就是您在此处看到的结果。

如果您想要一个 400 x 400 像素的画布，请将 width 和 height 放入 <canvas> 标记中，而不是放入 CSS 类中：

HTML：

<canvas class="myCanvas" width=400 height=400></canvas>

CSS：

.myCanvas {
    border: 1px solid black;
}

【讨论】：