我有一个<div style="border:1px solid border;" />和帆布,使用以下方式绘制:
context.lineWidth = 1;
context.strokeStyle = "gray";
绘图看起来相当模糊(lineWidth小于1创建更糟糕的图片),并且没有任何接近div的边界.是否可以使用画布获得与HTML相同的绘图质量？
var ctx = document.getElementById("canvas").getContext("2d");
ctx.lineWidth = 1;
ctx.moveTo(2, 2);
ctx.lineTo(98, 2);
ctx.lineTo(98, 98);
ctx.lineTo(2, 98);
ctx.lineTo(2, 2);
ctx.stroke();div {
border: 1px solid black;
width: 100px;
height: 100px;
}
canvas, div {background-color: #F5F5F5;}
canvas {border: 1px solid white;display: block;}<table>
<tr><td>Line on canvas:</td><td>1px border:</td></tr>
<tr><td><canvas id="canvas" width="100" height="100"/></td><td><div> </div></td></tr>
</table>我希望能够在我可以计算的矩形区域中居中单行文本.我期望在画布上的二维几何中做的一件事就是将宽度未知的东西居中.
我听说作为一种解决方法,您可以在HTML容器中创建文本,然后调用jQuery的width()函数,但是我没有正确处理文档正文的瞬间添加？并得到宽度为0.
如果我有一行文本,比填充屏幕中的大部分宽度短得多,我如何知道在我知道的字体大小的画布上它有多宽？
TIA,