时间戳

首页 > 解决方案 > 功能的画布部分不会运行？

javascript - 功能的画布部分不会运行？

问题描述

changeCanvasBackground = function() {
  document.getElementById("ji").innerHTML = "Paragraph changed!";
  var canvas = document.getElementById('myCanvas');
  document.getElementById("ji").innerHTML = "Paragraph changed two!";
  var ctx = canvas.getContext('2D');
  ctx.fillStyle("Red");
}
document.addEventListener('DOMContentLoaded', changeCanvasBackground);
<p id="ji">Hello</p>
<div id="gameArea">
  <canvas id="myCanvas" width="800" height="480"></canvas>
</div>

'changeCanvasBackground' 函数确实运行，但画布部分没有运行，'document.getElementById("ji")' 用于显示这一点。如果有人可以帮助我。

标签： javascript

解决方案

  • getContext采用小写字符2d
  • 您需要在 fillStyle 之后调用fillRect
  • fillStyle是属性而不是方法

所以这三行应该是这样的：

var ctx = canvas.getContext('2d');
ctx.fillStyle = "Red";
ctx.fillRect(0, 0, canvas.width, canvas.height);

最终结果将是这样的：

changeCanvasBackground = function() {
  document.getElementById("ji").innerHTML = "Paragraph changed!";
  var canvas = document.getElementById('myCanvas');
  document.getElementById("ji").innerHTML = "Paragraph changed two!";
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = "Red";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}
document.addEventListener('DOMContentLoaded', changeCanvasBackground);
<p id="ji">Hello</p>
<div id="gameArea">
  <canvas id="myCanvas" width="800" height="480"></canvas>
</div>

推荐阅读