canvas-wypisywanie wzoru struktury zwiążku chemicnego

pytanie zadane 7 maja w JavaScript przez niezalogowany
edycja 7 maja

witam mam problem którego nie mogłem rozwiązac wiec postanowiłem sie zapytac chce wypisac wzór

O

/ \

H H

troche tu sie psuje jednak nie moge poprawnie ustworzyc tego bo pozycje nie są odpowiednie i sie psuje znaczy pozycje ze np ctx.filltext(" o", 50, 100); to te spacje znikają a nie powinny i czy ktos mi pomoze z groy dziekuje kod:

<!doctype html>
<html lang="pl">
<head>


    <title>chemia</title>
    <style>


        body{

        background-color: grey;



}
        #obraz{

            border: 3px solid #2E8B57;
            background-color: black;





}


        
    </style>

    
</head>
<body>


    <input type="text" id="nazwa" placeholder="skrót pierwiastka">
    <input type="submit" onclick="zrob()" value="zobacz">

    <canvas id="obraz" width="500" height="500"></canvas>


    <script>

const canvas = document.getElementById("obraz");
const ctx = canvas.getContext("2d");

function zrob() {
    let pier = document.getElementById("nazwa").value;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    if (pier === "H") {
        ctx.font = "50px Arial";
        ctx.fillStyle = "white";
        ctx.fillText("Wodór  [h]", 50, 70);
        
        ctx.font = "10px Arial";
        ctx.textAlign = "left";
        ctx.textBaseline = "top"; 
        ctx.fillStyle = "white";
        
        let tekst = "Wodór jest najlżejszym pierwiastkiem chemicznym, posiadającym atomową liczbę protonów równą jeden. Jest to gaz bezbarwny, bez smaku i zapachu. Jego najczęstsze izotopy to prot (jedyny stabilny izotop) oraz deuter (z jedenastką neutronów) i tryt (z dwunastką neutronów), stanowiące izotopy promieniotwórcze. Występuje w wielu związkach chemicznych, w tym w wodzie oraz związkach organicznych, takich jak węglowodory. Wodór jest niezbędny do życia, występując w postaci wody, składnika większości substancji organicznych i odgrywając kluczową rolę w procesach biochemicznych. Ponadto, wodór jest powszechnie wykorzystywany w przemyśle, zwłaszcza w produkcji amoniaku do nawożenia roślin oraz w produkcji wodoru i wodorowęglanu sodu.";

        let maxWidth = canvas.width - 100;
        let x = 50; 
        let y = 250; 
        let words = tekst.split(' '); 
        let line = ''; 


        for (let i = 0; i < words.length; i++) {
            let testLine = line + words[i] + ' ';
            let metrics = ctx.measureText(testLine);
            let testWidth = metrics.width;
            if (testWidth > maxWidth && i > 0) {
                ctx.fillText(line, x, y);
                line = words[i] + ' ';
                y += 25; 
            } else {
                line = testLine;
            }
        }
        ctx.fillText(line, x, y);
    }


    if (pier === "H20") {
        ctx.font = "50px Arial";
        ctx.fillStyle = "white";
        ctx.fillText("woda [H20]", 50, 70);

        
        ctx.font = "10px Arial";
        ctx.textAlign = "left";
        ctx.textBaseline = "top"; 
        ctx.fillStyle = "white";
        
        let tekst = "";

        let maxWidth = canvas.width - 100; 
        let x = 50; 
        let y = 250; 
        let words = tekst.split(' '); 
        let line = '';

        for (let i = 0; i < words.length; i++) {
            let testLine = line + words[i] + ' ';
            let metrics = ctx.measureText(testLine);
            let testWidth = metrics.width;
            if (testWidth > maxWidth && i > 0) {
                ctx.fillText(line, x, y);
                line = words[i] + ' ';
                y += 25; 
            } else {
                line = testLine;
            }
        }
        ctx.fillText(line, x, y);
    }




    
}





        
    </script>




    
</body>
</html>

komentarz 7 maja przez VBService Ekspert (255,840 p.)
edycja 7 maja przez VBService

BTW H2O nie H20

   if (pier === "H20") {
        ctx.font = "50px Arial";
        ctx.fillStyle = "white";
        ctx.fillText("woda [H20]", 50, 70);

AFAIK: w podanym przykładzie używasz dla: placeholder="skrót pierwiastka"

+ H wodór - pierwiastek
+ H2O to nie jest pierwiastek, ale związek chemiczny.
Wzór chemiczny opisujący cząsteczkę wody.

komentarz 7 maja przez niezalogowany

czy ja cos zle napisałem? wątpie wiem ze woda to związek chemicny a tak na początku miało byc to z pierwiastkami ale postanowiłem dodac związki i chyba nie zmieniłem placeholder

1 odpowiedź

odpowiedź 7 maja przez VBService Ekspert (255,840 p.)
wybrane 7 maja

Najlepsza

Proponuję użyć: moveTo i lineTo

        if (pier === 'H2O') {
          ctx.font = "50px Arial";
          ctx.fillStyle = "white";
          ctx.fillText("Woda [H20]", 50, 70);

          ctx.fillStyle = 'blue';
          ctx.fillText('O', 120, 140); // Tlen
          ctx.fillStyle = 'gray';
          ctx.fillText('H', 80, 220); // Wodór
          ctx.fillText('H', 160, 220); // Wodór

          // Linie reprezentujące wiązania chemiczne
          ctx.beginPath();
          ctx.strokeStyle = 'white';
          ctx.lineWidth = 2;
          ctx.moveTo(120, 140);
          ctx.lineTo(100, 180);
          ctx.stroke();
          ctx.moveTo(160, 140);
          ctx.lineTo(180, 180);
          ctx.stroke();
        }

[ pełny kod prezentacji: on-line ]

inne propozycje:
+ zamiast pisania po canvas - "pole tekstowe" <pre>
+ w czasie wpisywania w <input> automatyczna kapitalizacja liter bez SHIFT czy CAPSLOCK
+ w czasie wpisywania w <input> i naciśnięcia ENTER, wywołanie funkcji: zrob()

<!doctype html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <title>chemia</title>
    <style>
      body {
        background-color: grey;
      }
      #obraz {
        position: relative;
        border: 3px solid #2E8B57;
        background-color: black;
        width: 500px;
        height: 500px;
      }
      #obraz canvas {
        position: absolute;
        top: 0; left: 0;
      }
      #obraz pre {
        position: absolute;
        top: 220px; left: 50px;
        bottom: 25px; right: 50px;
        z-index: 99;
        color: limegreen;
        background-color: hsl(0 10% 10% /.3);
        white-space: pre-wrap;
      }      
      #skrot-pierwiastek {
        text-transform: uppercase; /* kapitalizacja liter bez SHIFT czy CAPSLOCK */
      }
      #skrot-pierwiastek::placeholder {
        text-transform: none;
      }
    </style>
  </head>
  <body>
    <input type="text" id="skrot-pierwiastek" placeholder="skrót pierwiastka" onkeydown="zrob(event)">
    <input type="button" onclick="zrob(event)" value="zobacz">

    <div id="obraz">
      <canvas width="500" height="500"></canvas>
      <pre></pre>
    </div>

    <script>
      const pierwiastki = [
        { 
          symbol: 'H',
          name: 'Wodór',
          desc: 'Wodór jest najlżejszym pierwiastkiem chemicznym, posiadającym atomową liczbę protonów równą jeden. Jest to gaz bezbarwny, bez smaku i zapachu. Jego najczęstsze izotopy to prot (jedyny stabilny izotop) oraz deuter (z jedenastką neutronów) i tryt (z dwunastką neutronów), stanowiące izotopy promieniotwórcze. Występuje w wielu związkach chemicznych, w tym w wodzie oraz związkach organicznych, takich jak węglowodory. Wodór jest niezbędny do życia, występując w postaci wody, składnika większości substancji organicznych i odgrywając kluczową rolę w procesach biochemicznych. Ponadto, wodór jest powszechnie wykorzystywany w przemyśle, zwłaszcza w produkcji amoniaku do nawożenia roślin oraz w produkcji wodoru i wodorowęglanu sodu.'
        },
        {
          symbol: 'H2O',
          name: 'Woda',
          desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
        }       
      ];

      const canvas = document.querySelector('#obraz canvas');
      const ctx = canvas.getContext('2d');

      function zrob(event) {
        if (event.type === 'keydown' && event.code !== 'Enter') return;

        const skrot_pierwiastek = document.getElementById('skrot-pierwiastek').value.toUpperCase();
        const opis_pierwiastek = document.querySelector('#obraz pre');

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        opis_pierwiastek.textContent = '';
        
        const pierwiastek = pierwiastki.find(p => p.symbol === skrot_pierwiastek);
        if (! pierwiastek) {
          opis_pierwiastek.textContent = 'Nie posiadam informacji na temat tego pierwiastka.';
          return;
        }

        ctx.font = '50px Arial';
        ctx.fillStyle = 'white';
        ctx.fillText(pierwiastek.name + '  ' + `[${pierwiastek.symbol}]`, 50, 70);
        opis_pierwiastek.textContent = pierwiastek.desc;

        if (pierwiastek.symbol === 'H2O') {
          ctx.fillStyle = 'blue';
          ctx.fillText('O', 120, 140); // Tlen
          ctx.fillStyle = 'gray';
          ctx.fillText('H', 80, 220); // Wodór
          ctx.fillText('H', 160, 220); // Wodór

          // Linie reprezentujące wiązania chemiczne
          ctx.beginPath();
          ctx.strokeStyle = 'white';
          ctx.lineWidth = 2;
          ctx.moveTo(120, 140);
          ctx.lineTo(100, 180);
          ctx.stroke();
          ctx.moveTo(160, 140);
          ctx.lineTo(180, 180);
          ctx.stroke();
        }
      }
    </script>
  </body>
</html>