Разная глобальная альфа для разных холстов

Question

Мне нужно, чтобы мой текстовый оверлей был другого цвета и имел значение globalAlpha, отличное от холста. Однако textOverlay наследует свойство от холста, как я могу предотвратить это и установить разные свойства для каждого?

Пример кода JS:

function draw(cordOne, cordTwo, cordThree, n) {

  let canvas = document.getElementById("canvas");
  let textOverlay = document.getElementById("text");
  if (canvas.getContext) {
    let context = canvas.getContext("2d");
    let textOverlay = canvas.getContext("2d");

    context.globalAlpha = 0.1;
    context.beginPath();
    context.moveTo(cordOne[0], cordOne[1]);
    context.lineTo(cordTwo[0], cordTwo[1]);
    context.lineTo(cordThree[0], cordThree[1]);
    context.closePath();

    let centerX = (cordOne[0] + cordTwo[0] + cordThree[0]) / 3;
    let centerY = (cordOne[1] + cordTwo[1] + cordThree[1]) / 3;

    textOverlay.font = "20px Arial Black";
    textOverlay.fillText(n, centerX, centerY);

    context.lineWidth = 4;
    context.strokeStyle = "#666666";
    context.stroke();

    // the fill color
    context.fillStyle = "#22234";
    context.fill();
    }
 }

 draw([35, 49], [168, 49], [168, 128], 1);
 draw([35, 49], [140, 49], [140, 115], 2);

Html:

<html>

<body>
  <div class="stack">
    <canvas id="text" width="1000" height="700">
    </canvas>
    <canvas id="canvas" width="1000" height="700">
    </canvas>
  </div> 
</body>

</html>

CSS :

.stack {
  position: relative;
}
.stack canvas {
  position: absolute;
  left: 0;
  top: 0;
}

javascript html5-canvas

0

Rosenberg 27 Окт 2019 в 18:12

Answer 1

Проблема заключается в том, что вы устанавливаете контекст наложения текста как контекст холста, исправление которого должно быть изменено на let textOverlay = canvas.getContext("2d"); на let tCtx = textOverlay.getContext("2d");, где textOverlay - это холст textOverlay.

Примере:

function draw(cordOne, cordTwo, cordThree, n) {

  let canvas = document.getElementById("canvas");
  let textOverlay = document.getElementById("text");
  if (canvas.getContext) {
    let context = canvas.getContext("2d");
    let t = textOverlay.getContext("2d");

    context.globalAlpha = 0.1;
    context.beginPath();
    context.moveTo(cordOne[0], cordOne[1]);
    context.lineTo(cordTwo[0], cordTwo[1]);
    context.lineTo(cordThree[0], cordThree[1]);
    context.closePath();

    let centerX = (cordOne[0] + cordTwo[0] + cordThree[0]) / 3;
    let centerY = (cordOne[1] + cordTwo[1] + cordThree[1]) / 3;

    t.font = "20px Arial Black";
    t.fillText(n, centerX, centerY);

    context.lineWidth = 4;
    context.strokeStyle = "#666666";
    context.stroke();

    // the fill color
    context.fillStyle = "#22234";
    context.fill();
    }
 }

 draw([35, 49], [168, 49], [168, 128], 1);
 draw([35, 49], [140, 49], [140, 115], 2);

.stack {
  position: relative;
}
.stack canvas {
  position: absolute;
  left: 0;
  top: 0;
}

<div class="stack">
    <canvas id="text" width="1000" height="700">
    </canvas>
    <canvas id="canvas" width="1000" height="700">
    </canvas>
  </div>

Надеюсь это поможет :)

0

Ameer 27 Окт 2019 в 15:22

Answer 2

Ваша проблема в том, что, хотя у вас есть два canvas тега с разными идентификаторами и даже если вы правильно инициализируете переменные

  let canvas = document.getElementById("canvas");
  let textOverlay = document.getElementById("text");

В вашем if вы объявляете их как context того же самого canvas:

  if (canvas.getContext) {
    let context = canvas.getContext("2d");
    let textOverlay = canvas.getContext("2d");
    //Further code
  }

Но вам нужно исправить повторную инициализацию textOverlay:

  if (canvas.getContext) {
    let context = canvas.getContext("2d");
    let textOverlay = textOverlay.getContext("2d");
    //Further code
  }

0

Lajos Arpad 27 Окт 2019 в 15:21

Разная глобальная альфа для разных холстов

2 ответа

Похожие вопросы

Новые вопросы

javascript