时间戳

首页 > 解决方案 > 无法在画布上绘图。可能是什么问题？

javascript - 无法在画布上绘图。可能是什么问题？

问题描述

我正在尝试在我的画布上绘制一些非常基本的东西，但它没有绘制任何东西，也没有显示任何要修复的错误。这里可能是什么问题？

这是我的代码：

我还尝试将 js 代码移动到外部 js 文件，但没有奏效。

<body>
<canvas
  id="myCanvas"
  width="800"
  height="500"
  style="border:1px solid #474747;"
></canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect = (10, 100, 15, 400);
</script>

标签： javascripthtml5-canvas

解决方案

你的问题是：

ctx.fillRect = (10, 100, 15, 400);

.fillRect()是一个将 ax, y, width, height作为参数的方法，因此您需要像这样调用它：

ctx.fillRect(10, 100, 15, 400);

请参见下面的示例：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 100, 15, 400);
<canvas id="myCanvas" width="800" height="500" style="border:1px solid #474747;"></canvas>

推荐阅读