Почему эти холсты не отображаются?

Question

Я создаю веб-приложение, которое позволяет пользователям вводить несколько цветов, указав значения RGB. После отправки пользователь увидит холст со сплошным прямоугольником, нарисованным в выбранном цвете.

На этой странице у меня есть 7 полотен. Первый рисует просто отлично, но ни один из остальных не появляется. Браузер Safari. Вот соответствующий код:

Во-первых, элемент script в заголовке, который определяет функцию, которую я использую для рисования на холсте.

<script language="JavaScript" TYPE="text/javascript"><!--
function drawCanvas(canvasId, red, green, blue) {
var theCanvas = document.getElementById("canvas" + canvasId);

     var context = theCanvas.getContext("2d");

     context.clearRect(0,0,100,100);
     context.setFillColor(red,green,blue,1.0);
     context.fillRect(0,0,100,100);
    }
    // -->
    </script>

Далее, источник HTML, где у меня есть теги canvas и встроенный Javascript для вызова функции drawCanvas

<canvas id="canvas0" width="100" height="100">
  </canvas>


   <script language="JavaScript" TYPE="text/javascript"><!--
 drawCanvas(0,250,0,0);
   // -->
 </script>
.
. //more source
.
<canvas id="canvas1" width="100" height="100">
  </canvas>


   <script language="JavaScript" TYPE="text/javascript"><!--
 drawCanvas(1,4,250,6);
   // -->
 </script>

Также предоставляется скриншот. Как видите, «красный» холст подходит просто отлично, но второй, который должен быть зеленым, вообще не появляется. Есть идеи?

Answer 1

Существует некоторая странность в том, как setFillColor интерпретирует значения цвета - измените второй вызов на drawCanvas(1,0,250,0) (вместо 4, 250, 6 для трех последних аргументов), и зеленый холст будет отображаться очень хорошо (при отображении локального HTML-файл - предложение @ Chetan стоит для страниц, которые не загружают , которые быстро, но не решают вашу проблему ;-). Это происходит как в Safari, так и в Chrome. К сожалению, я не могу найти документацию для setFillColor (в новом стандарте HTML5 используется другой подход и, похоже, он не определяет такой метод), поэтому я не могу проверить, является ли это ошибкой webkit (webkit - это то, что используют и Safari, и Chrome для рендеринга) или разница в том, что args setFillColor хочет!

Редактировать : Я немного поэкспериментировал, и мне кажется, что он хочет, чтобы компонент RGB находился в диапазоне от 0,0 до 1,0, , а не 0 до 255. Изменение вызова на setFillColor:

 context.setFillColor(red/256,green/256,blue/256,1.0);

, следовательно, работает нормально.

Answer 2

Вам нужно подождать, пока страница загрузится, пока вы не сможете надежно выполнить document.getElementById. Обычно вы выполняете DOM-манипуляции в окне onload или в событии DOMContentLoaded.

Это должно работать:

window.onload = function() {
     drawCanvas(0,250,0,0);
     drawCanvas(1,4,250,6);
}