Javascript在多张画布上绘制

我试图在由类选择器获得的多张画布上绘制相同的东西。我做错了什么

var canvases = document.getElementsByClassName('canvas');

for( var i=0; i<canvases.length; i++){
   ctx = canvases[i].getContext('2d');

   ctx.arc(50, 50, 50, 0, 1.5*Math.PI);
   ctx.lineWidth = 15;

   ctx.strokeStyle = 'black';
   ctx.stroke();    
}

var canvasses=document.getElementsByClassName（'canvas'）；
对于（var i=0；i您需要将它们声明为
元素，而不是
元素。画布是它们自己特定的HTML5元素

因此，您还可以摆脱该类，使用
getElementsByTagName
而不是
getElementsByClassName
，只需对CSS和标记进行一些小的更改：

HTML

<canvas></canvas>
<canvas></canvas>
<canvas></canvas>

JS

canvas {
    width: 100px;
    height: 100px;
    background-color: yellow;
    display: inline-block;
}

var canvases = document.getElementsByTagName('canvas');

for( var i=0; i<canvases.length; i++){
     ctx = canvases[i].getContext('2d');

     ctx.arc(50, 50, 50, 0, 1.5*Math.PI);
     ctx.lineWidth = 15;

     ctx.strokeStyle = 'black';
     ctx.stroke();    
}

var canvases=document.getElementsByTagName（'canvas'）；
对于（VARI=0；看，你们赢了！；P，在帖子回答中要彻底得多。删除我的。