Javascript HTML5Canvas:fillRect（）生成完全不正确的结果_Javascript_Html5 Canvas

Javascript HTML5Canvas:fillRect（）生成完全不正确的结果

javascript html5-canvas

Javascript HTML5Canvas:fillRect（）生成完全不正确的结果,javascript,html5-canvas,Javascript,Html5 Canvas,我刚刚开始学习HTML画布，我甚至不能让最简单的功能正常工作。fillRect（）会产生奇怪的结果，这与我观看的文档和教程不一致以下是html： <style> canvas{ width: 500px; height: 500px; background-color: aqua; border: 1px solid black; } </style> <body> &

我刚刚开始学习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>

这是一个完全混乱的结果：

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

我在这里遗漏了什么？

在

html元素中添加一个宽度和高度属性应该可以解决这个问题

例如：

var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
ctx.fillStyle='绿色'；
ctx.fillRect（10,10100100）
画布{
背景色：浅绿色；
边框：1px纯黑；
}

它的可能副本修复了它。但是为什么通过CSS设置宽度和高度没有帮助呢？默认的宽度/高度是300x150。更改css只会将其拉伸到新值。可以使用HTML属性更改默认值，也可以使用JS更改元素的基值
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);