Почему функции обводки HTML Canvas отображают цвета, отличные от указанных - PullRequest
Новая
       31

Почему функции обводки HTML Canvas отображают цвета, отличные от указанных

0 голосов
/ 27 января 2019

В экспериментальных целях я написал простой код для рисования прямоугольника на холсте HTML, одну функцию - для рисования прямоугольника красным, а другую - для рисования прямоугольника белым. Конечная цель состоит в том, чтобы использовать их, чтобы мигать между красным и белым, чтобы сигнализировать о том, что данный прямоугольник (или квадрат, в зависимости от обстоятельств) может сигнализироваться как имеющий какое-то особое значение в будущем приложении.

Однако при тестировании кода я заметил нечто странное.

Я указал цвета в своем коде как rgba (255, 255, 255, 1) для белого и rgba (255, 0, 0, 1) для красного. Когда я запустил код (указанный ниже), цвета, которые я на самом деле получил, были следующие:

Начало: 128, 128, 128

Нажмите «Тест 1»: 191, 64, 64

Нажмите «Тест 2»: 223, 159, 159

Полный код теста приведен ниже. 

function DrawRed() {
  var ref = document.getElementById("MainCanvas");
  var ctx = ref.getContext("2d");

  ctx.strokeStyle = "rgba(255, 0, 0, 1)";
  ctx.fillStyle = "rgba(255, 0, 0, 1)";
  ctx.lineWidth = 1;

  //ctx.beginPath();
  //ctx.moveTo(60, 60);
  //ctx.lineTo(60, 120);
  //ctx.lineTo(120, 120);
  //ctx.lineTo(120, 60);
  //ctx.lineTo(60, 60);
  //ctx.stroke();

  ctx.strokeRect(60, 60, 60, 60);

  //End event handler
}


function DrawWhite() {
  var ref = document.getElementById("MainCanvas");
  var ctx = ref.getContext("2d");

  ctx.strokeStyle = "rgba(255, 255, 255, 1)";
  ctx.fillStyle = "rgba(255, 255, 255, 1)";
  ctx.lineWidth = 1;

  //ctx.beginPath();
  //ctx.moveTo(60, 60);
  //ctx.lineTo(60, 120);
  //ctx.lineTo(120, 120);
  //ctx.lineTo(120, 60);
  //ctx.lineTo(60, 60);
  //ctx.stroke();

  ctx.strokeRect(60, 60, 60, 60);

  //End event handler
}

function init() {
  var ref = document.getElementById("Test1");

  ref.onclick = DrawRed;

  ref = document.getElementById("Test2");

  ref.onclick = DrawWhite;

}

init();

DrawWhite();
<canvas width="600" height="600" id="MainCanvas" style="position: absolute; top: 10px; left: 10px; background-color: rgba(0, 0, 0, 1);">
    </canvas>
<br>

<div style="position: absolute; top: 100px; left: 800px;">

  <button type="button" id="Test1">Test 1</button>

  <button type="button" id="Test2">Test 2</button>

</div>

Несмотря на то, что я явно устанавливаю цвета, как указано выше, функции 2d-контекста не отображают цвета, как указано. Может кто-нибудь объяснить, почему это так?

Такое же явление наблюдается в двух случаях. Один, где я рисую прямоугольник по частям, используя ctx.lineTo () (эта опция закомментирована выше), и два, где я рисую прямоугольник, используя ctx.strokeRect (). Оба дают одинаковый аномальный результат.

Приведенные выше результаты были получены для Chrome версии 71.0.3578.98 (официальная сборка) (64-разрядная версия) и Firefox Quantum 61.0.2 (64-разрядная версия), обе работают под Windows 7.

Любая информация, позволяющая мне отображать цвета, которые я на самом деле задаю, будет большинство Добро пожаловать.

...