Использование FillRect на несколько холсте

Я использую два брезентовых элементы, которые разделенным друг от друга в положении, и я пытаюсь использовать FillRect два рисовать их каждые с другим цветом, используя FillRect. Проблема в том, что только одно полотно заполняется с использованием fillRect (т. Е. «Синий» в примере кода ниже). Я могу получить их обоих в разных цветах, используя css style = background-color, но меня больше интересует, почему я fillRect не работает для меня в этом случае.Использование 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 внутри тегов сценария:

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

источник

2015-09-05 holmberd

Попробуйте назначить каждому холсту другой идентификатор, а затем использовать 'document.getElementById (" cavas1 «);'. – Zak

Это работает, вы рисуете второй прямоугольник с холста. Запустите его на (0,0) и не (200,0):

//canvas2 
ctx2.fillStyle = "red"; 
ctx2.fillRect(0,0,150,150);

Ниже приведен пример фрагмента:

// 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(0,0,150,150);

<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>

источник

2015-09-05 17:23:54

Я пропустил это Спасибо, больше кофе для меня, я полагаю. – holmberd

@holmberd. Пожалуйста, нажмите зеленую галочку, чтобы принять правильный ответ Спенсера Виццорека. Таким образом, ваш решаемый вопрос будет снят с списка требуемых ответов. Благодаря! – markE

@markE Я сделал, но, видимо, прямо перед тем, как отредактировать его ответ, все исправлено. Спасибо, что дали мне знать. – holmberd

Использование FillRect на несколько холсте

ответ

Смежные вопросы