[英]Javascript draw on multiple canvases
我試圖在類選擇器得到的多個畫布上繪制相同的東西。 我究竟做錯了什么?
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();
}
她是小提琴
您需要將它們聲明為<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();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.