Question

假设我有<canvas>包含一行（使用lineTo函数）。

canvas经常更改其维度（height和width，height或width）。

在canvas尺寸更改期间，我希望保持相同的视觉宽度。

非常感谢。

以下代码段表示当画布的尺寸影响线条的视觉宽度时的当前情况。

var index;
var canvas;
var context;

for (index = 1; index <= 2; index++) {
  canvas = document.getElementById("canvas" + index);
  context = canvas.getContext('2d');

  context.beginPath();
  context.moveTo(100, 150);
  context.lineTo(450, 50);
  context.lineWidth = 16;
  context.stroke();
}

<h3>
As you can see, both canvas objects has the same line initialization 
in JavaScript code. the only diff between them are the dimensions (in our case, the width).
</h3>
<canvas id="canvas1" style="width:100px"></canvas>
<canvas id="canvas2" style="width:300"></canvas>

Answer 1

所以你有几件事情会让你觉得奇怪...画布需要在CSS之外调整大小。通过在css中设置大小，您可以使用它的原生大小来拉伸画布。

通过切换元素的大小来注意区别。

另一件事现在是它们的大小正确你在100px画布之外开始原始点。

进一步阅读：https://www.w3.org/TR/html5/scripting-1.html#attr-canvas-width

这里是一个小提琴，展示了这里真正发生的事情 - https://jsfiddle.net/bopjtwfe/

var index;
var canvas;
var context;

for (index = 1; index <= 2; index++) {
  canvas = document.getElementById("canvas" + index);
  context = canvas.getContext('2d');

  context.beginPath();
  context.moveTo(10, 10);
  context.lineTo(150, 150);
  context.lineWidth = 16;
  context.stroke();
}

canvas {
  display: block;
  margin-bottom: 10px;
  background-color: white;
}

<canvas id="canvas1" width='100px' height='100px' ></canvas>
<canvas id="canvas2" width='300px' height='300px'></canvas>

如何在重新调整画布大小时防止HTML5画布线宽发生变化。

1 个答案: