javascript - 无法在 Canvas 上绘图。可能是什么问题?

标签 javascript html5-canvas

我试图在我的 Canvas 上绘制一些非常基本的东西,但它没有绘制任何东西,也没有显示任何需要修复的错误。这里可能有什么问题?

这是我的代码:

我还尝试将 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>

最佳答案

您的问题是:

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

.fillRect()是一个以 x, 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>

关于javascript - 无法在 Canvas 上绘图。可能是什么问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57863165/

相关文章:

javascript - Canvas /照片 - getImageData 不起作用

html - 如何在从 jsPDF 生成的 PDF 中添加水印?

javascript - 为什么获取 cookie 不起作用?

javascript - window 和 window 的 top 属性背后的原因是什么?

javascript - CSS 中的 Circle div 无法在 Canvas 中正确显示

javascript - 使用 html 绘制数据图表

javascript - HTML 将 WebGL Canvas 保存为图像

javascript - 如何使用抛物线方程绘制图形

javascript - 如何在 Javascript $.each 中通过循环将对象添加到数组中?

javascript - JS 单词高亮和分类工具