动态创建的画布无法识别/不可操作答案

【问题标题】：Dynamically created canvas not recognized/manipulatable动态创建的画布无法识别/不可操作
【发布时间】：2021-01-10 05:59:06
【问题描述】：

我正在尝试在不使用任何 html 的情况下创建并将画布填充为蓝色。我已经成功地渲染了一个空的画布。当我尝试用如下第二个代码 sn-p 中所示的颜色填充画布时，会出现此问题。在下面的两个 sn-ps 中，唯一的区别是哪个画布填充了蓝色（第一个中的 document.getElementsByClassName("blueCanvas")[0] 有效，而 document.getElementsByClassName("blueCanvas")[2] 应该填充动态创建的画布，但失败了。

我尝试过/注意到的一些事情：

首先我认为这是创建画布和尝试填充它的js的执行顺序问题，但即使我在<body>的开头创建画布，问题仍然存在。我还认为将元素附加到 DOM 可能是一个问题，但它会呈现一个空画布，所以我看不出这是怎么可能的。

谢谢。

var newCanvas = document.createElement('canvas');
newCanvas.width = '300';
newCanvas.height = '150'
newCanvas.className = 'blueCanvas';
newCanvas.style = 'border:1px solid black'
newCanvas.innerHTML = '<canvas> </canvas>';
document.body.appendChild(newCanvas);
var canvas = document.getElementsByClassName("blueCanvas")[0];
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

<canvas id="canvas" class='blueCanvas' width="300" height="150" style="border:1px solid black"></canvas>
<canvas id="canvas" class='blueCanvas' width="300" height="150" style="border:1px solid black"></canvas>

var newCanvas = document.createElement('canvas');
        newCanvas.width = '300';
        newCanvas.height = '150'
        newCanvas.className='blueCanvas';
        newCanvas.style= 'border:1px solid black'
        newCanvas.innerHTML = '<canvas> </canvas>';
document.body.appendChild(newCanvas);
var canvas = document.getElementsByClassName("blueCanvas")[2];
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

<canvas id="canvas" class='blueCanvas' width="300" height="150" style="border:1px solid black"></canvas>
<canvas id="canvas" class='blueCanvas' width="300" height="150" style="border:1px solid black"></canvas>

【问题讨论】：

你为什么把另一个画布放在一个画布里？ newCanvas.class 不正确。 JavaScript 中的 HTML 类属性是newCanvas.className。
很抱歉，我在哪里放了另一个画布？我更改了newCanvas.class 感谢您指出这一点。
newCanvas.innerHTML = '<canvas> </canvas>';。 newCanvas 已经是一个画布元素。请注意，您不需要使用document.getElementsByClassName("blueCanvas")[2]; 获取元素。 newCanvas 是你的画布元素。所以，const ctx = newCanvas.getContext('2d');.
哦。好吧，看起来newCanvas.className 修复了它。如果您将其作为答案而不是评论（我认为不可能将其标记为正确），我会将您的答案标记为正确。谢谢。

标签： javascript html dom canvas html5-canvas

【解决方案1】：

因为我知道你读过我的 cmets：

function blueCanvas(){
  let canvas = document.createElement('canvas'), style = canvas.style, ctx;
  canvas.width = 300; canvas.height = 150; canvas.className = 'blueCanvas';
  style.border = '1px solid black'; ctx = canvas.getContext('2d');
  ctx.fillStyle = 'blue'; ctx.fillRect(0, 0, 300, 150);
  document.body.appendChild(canvas);
}
blueCanvas();

【讨论】：

【解决方案2】：

不清楚你想要什么。

也许这会有所帮助

const canvas = document.createElement('canvas');
canvas.width = 400;  // size it
canvas.height = 300;
canvas.className = 'blueCanvas'; // assign class name
document.body.appendChild(canvas); // add to document

// get context
const ctx = canvas.getContext("2d");

// fill it with blue
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.font = "32px Arial";
ctx.textAlign = "center";
ctx.fillText("Dynamically added canvas", 200, 100);

【讨论】：

看来我的代码唯一的问题是写canvas.class而不是`canvas.className'（如cmets中所指出的）。代码现在可以正常工作了。