HTML 5 画布：fillRect() 产生完全错误的结果答案

【问题标题】：HTML 5 canvas: fillRect() produces completely incorrect resultsHTML 5 画布：fillRect() 产生完全错误的结果
【发布时间】：2018-12-29 04:30:37
【问题描述】：

我刚开始学习 HTML 画布，我什至无法让最简单的功能正常工作。 fillRect() 产生奇怪的结果，与我看过的文档和教程不一致。

这里是html：

 <style>
    canvas{
        width: 500px;
        height: 500px;
        background-color: aqua;
        border: 1px solid black;
    }
</style>

<body>
   <canvas id="canvas"></canvas>
   <script src="canvas.js"></script>
</body>

Javascript：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);

这是完全混乱的结果：

如您所见，y 坐标和高度都完全错误。我试过玩它，试过 Chrome 和 Firefox - 结果一样。

我在这里错过了什么？

【问题讨论】：

Wrong rectangle size in canvas的可能重复

标签： javascript html5-canvas

【解决方案1】：

为您的<canvas> html 元素添加宽度和高度属性应该可以解决问题。 More info

例如：<canvas width="500" height="500"></canvas>

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);

canvas {
  background-color: aqua;
  border: 1px solid black;
}

<body>
  <canvas id="canvas" width="500" height="500"></canvas>
  <script src="canvas.js"></script>
</body>

【讨论】：

它修复了它。但是为什么通过 CSS 设置宽度和高度没有帮助呢？
默认宽度/高度为 300x150。更改 css 只会将其拉伸为新值。可以使用 HTML 属性改变默认值，也可以使用 JS 改变元素基值