Saya perlu hamparan teks saya memiliki warna yang berbeda dan nilai globalAlpha yang berbeda dari hamparan kanvas. Namun, textOverlay mewarisi properti dari kanvas, bagaimana saya bisa mencegahnya dan mengatur properti yang berbeda untuk masing-masing?

Contoh Kode 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;
}
0
Rosenberg 27 Oktober 2019, 18:12

2 jawaban

Jawaban Terbaik

Masalahnya adalah Anda menyetel konteks hamparan teks sebagai konteks kanvas, perbaikannya adalah mengubah let textOverlay = canvas.getContext("2d"); menjadi let tCtx = textOverlay.getContext("2d"); Di mana textOverlay adalah kanvas textOverlay.

Contoh:

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> 

Semoga ini membantu :)

0
Ameer 27 Oktober 2019, 15:22

Masalah Anda adalah meskipun Anda memiliki dua tag canvas dengan id yang berbeda dan meskipun Anda menginisialisasi variabel dengan benar

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

Di if Anda, Anda menyatakan ulang sebagai context dari canvas yang sama:

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

Tetapi Anda perlu memperbaiki inisialisasi ulang textOverlay:

  if (canvas.getContext) {
    let context = canvas.getContext("2d");
    let textOverlay = textOverlay.getContext("2d");
    //Further code
  }
0
Lajos Arpad 27 Oktober 2019, 15:21