Question

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();
});

正如您所看到的，它似乎并没有实际创建从一个角落到另一个角落的对角线。正确的论点是什么才能正确地平分广场？

Answer 1

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

如果您想要400px到400px的画布，请将width和height放入<canvas>标记，而不是放入CSS类：

HTML：

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

CSS：

.myCanvas {
    border: 1px solid black;
}

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

1 个答案: