HTML5画布: fillRect()产生完全不正确的结果
HTML5画布: fillRect()产生完全不正确的结果
提问于 2018-07-21 04:09:41
我刚刚开始学习HTML canvas，我甚至不能让最简单的功能正常工作。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都试过了--同样的结果。
这里我漏掉了什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-21 04:21:31
向您的<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51449692
复制相关文章
相似问题
腾讯云开发者
