首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >HTML5画布: fillRect()产生完全不正确的结果

HTML5画布: fillRect()产生完全不正确的结果
EN

Stack Overflow用户
提问于 2018-07-21 04:09:41
回答 1查看 417关注 0票数 0

我刚刚开始学习HTML canvas,我甚至不能让最简单的功能正常工作。fillRect()产生了奇怪的结果,这与我看过的文档和教程不一致。

下面是html:

代码语言:javascript
复制
 <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:

代码语言:javascript
复制
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);

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

如你所见,y坐标和高度都是完全错误的。我试过了,Chrome和Firefox都试过了--同样的结果。

这里我漏掉了什么?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-21 04:21:31

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

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

代码语言:javascript
复制
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);
代码语言:javascript
复制
canvas {
  background-color: aqua;
  border: 1px solid black;
}
代码语言:javascript
复制
<body>
  <canvas id="canvas" width="500" height="500"></canvas>
  <script src="canvas.js"></script>
</body>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51449692

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档