[英]Javascript draw on multiple canvases
I am trying to draw the same thing on multiple canvases gotten by class selector. 我试图在类选择器得到的多个画布上绘制相同的东西。 What am I doing wrong?
我究竟做错了什么?
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();
}
You need to declare them as <canvas>
elements, not <div>
elements. 您需要将它们声明为
<canvas>
元素,而不是<div>
元素。 Canvases are their own specific HTML5 element. 画布是他们自己的特定HTML5元素。
Accordingly can also get rid of the class and use getElementsByTagName
instead of getElementsByClassName
with a few minor CSS and markup changes: 相应地,也可以摆脱该类,使用
getElementsByTagName
代替getElementsByClassName
并进行一些小的CSS和标记更改:
HTML HTML
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
CSS CSS
canvas {
width: 100px;
height: 100px;
background-color: yellow;
display: inline-block;
}
JS 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.