JavaScript在多個畫布上繪製

Question

我想在類選擇器獲得的多個畫布上繪製相同的東西。我究竟做錯了什麼？

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();  
} 

她是在fiddle

Answer 1

你需要它們聲明爲<canvas>元素，不<div>元素。畫布是他們自己特定的HTML5元素。

因此也可以擺脫階級和使用getElementsByTagName，而不是getElementsByClassName有一些小的CSS和標記的變化：

HTML

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

CSS

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

JS

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();  
} 

FIDDLE