[英]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.