Я использую два элемента холста, которые отделены друг от друга по положению, и я пытаюсь использовать fillRect, чтобы нарисовать их разными цветами, используя fillRect. Проблема в том, что с помощью fillRect заполняется только один холст (т. е. "синий" в приведенном ниже примере кода). Я могу получить их обоих в разных цветах, используя css style=background-color, но меня больше интересует, почему в этом случае fillRect у меня не работает.
Спасибо за вашу помощь.
Вот мой HTML-код
<body style="position:relative">
<div id='c1' style="position:absolute; top:0px; left:0px; z-index:1">
<canvas id='canvas1' width='150' height='150'>
Your browser does not support HTML5 Canvas.
</canvas>
</div>
<div id='c2'style="position:absolute; top:0px; left:200px; z-index:2">
<canvas id='canvas2' width='150' height='150'>
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</form>
Вот мой код JavaScript внутри тегов script:
window.onload = function () {
// get all canvas elements
var canvasList = document.getElementsByTagName("canvas");
var ctx = canvasList[0].getContext("2d");
var ctx2 = canvasList[1].getContext("2d");
//canvas1
ctx.fillStyle = "blue";
ctx.fillRect(0,0,150,150);
//canvas2
ctx2.fillStyle = "red";
ctx2.fillRect(200,0,150,150);
}
