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

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

0 голосов
/ 27 октября 2019

Мне нужно, чтобы мой текстовый оверлей был другого цвета и имел значение 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;
}

Ответы [ 2 ]

0 голосов
/ 27 октября 2019

Проблема заключается в том, что вы устанавливаете контекст наложения текста как контекст холста, исправление которого должно быть изменено 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 голосов
/ 27 октября 2019

Ваша проблема в том, что, хотя у вас есть два 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
  }
...