Question

我有一个没有width和height属性的画布标记。画布具有内嵌宽度和高度。现在，当我将linearGradient应用于它时，它并不涵盖整个画布。演示：

＆＃13;

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");



var gradient1 = ctx.createLinearGradient(0, 0, 150, 0);

gradient1.addColorStop(0, "#123456");
gradient1.addColorStop(1, "#654321");
ctx.fillStyle = gradient1;

ctx.fillRect(0, 0, 150, 100);

＆＃13;

canvas {
  border: 1px dotted red;
}

＆＃13;

<canvas id="canvas" style="width: 150px; height: 100px;"></canvas>

＆＃13;

问题1：为什么整个150px的画布都没有被覆盖？如果我在canvas标签上添加width="150"和height="100"属性，为什么它会填满整个画布？

问题2：在下面的脚本中c.width返回300px而不是150px，为什么？

＆＃13;

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");


console.log(c.width);
console.log(c.height);

＆＃13;

canvas {
  border: 1px dotted red;
}

＆＃13;

<canvas id="canvas" style="width: 150px; height: 100px;"></canvas>

＆＃13;

问题3：这种行为是否与svg viewBox类似？

Answer 1

我不确定为什么内联样式不起作用，但是如果你将canvas元素更改为：

<canvas id="canvas" width="150px" height= "100px;"></canvas>

然后控制台记录正确的值，渐变填充画布。 :)我不知道为什么你不能使用其他方法，但我知道在我看到的每个地方我都认为使用html画布的每个人都用这种方式指定宽度和高度。（除非他们在javascript中指定它）

以下是您工作代码的笔：https://codepen.io/Awesomennjawarrior/pen/zwmmPY

为什么没有填充覆盖整个画布？

1 个答案: