Ferramenta escrever em imagem

Melhor ferramenta criar livros online.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Livro Folheado</title>

  <link rel="stylesheet" href="styles.css">

  <style>

  body {

  font-family: Arial, sans-serif;

}


.book {

  width: 500px;

  height: 400px;

  border: 5px solid pink;

  position: relative;

  overflow: hidden;

}


.page {

  width: 100%;

  height: 100%;

  box-sizing: border-box;

  padding: 20px;

  display: none;

}


.controls {

  position: absolute;

  bottom: 10px;

  left: 50%;

  transform: translateX(-50%);

}


button {

  margin: 0 10px;

  padding: 5px 10px;

  cursor: pointer;

}

  </style>

</head>

<body>

  <div class="book">

    <div class="page" id="page1">Valer é criar,<br>Ser amor no amar.<br><img src="https://www.litprichal.ru/upload/300/12129118a59d87d2548b69a4843e917e.gif"width="40%"></div>

    <div class="page" id="page2">A verdade de mim mesmo.<br><img src="https://avatars.mds.yandex.net/i?id=ad0050d3609762892ae3d188e521147fd3e34abf-9875416-images-thumbs&n=13"width="40%"></div>

    <!-- Adicione mais páginas conforme necessário -->

    <div class="controls">

      <button onclick="previousPage()">Anterior</button>

      <span id="currentPage">1</span>/<span id="totalPages">10</span>

      <button onclick="nextPage()">Próxima</button>

    </div>

  </div>


 <script>

 let currentPage = 1;

const totalPages = 10; // Altere conforme necessário


function showPage(pageNumber) {

  const pages = document.querySelectorAll('.page');

  pages.forEach(page => page.style.display = 'none');

  document.getElementById(`page${pageNumber}`).style.display = 'block';

  document.getElementById('currentPage').innerText = pageNumber;

}


function nextPage() {

  if (currentPage < totalPages) {

    currentPage++;

    showPage(currentPage);

  }

}


function previousPage() {

  if (currentPage > 1) {

    currentPage--;

    showPage(currentPage);

  }

}


document.addEventListener("DOMContentLoaded", function() {

  showPage(currentPage);

});

 </script>

</body>

</html>

Ferramenta criar boneco!


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Boneco em JavaScript</title>

</head>

<body>

    <canvas id="bonecoCanvas" width="200" height="300"></canvas>

    <script>

    document.addEventListener("DOMContentLoaded", function () {

    const canvas = document.getElementById("bonecoCanvas");

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


    // Desenha o corpo

    ctx.beginPath();

    ctx.arc(100, 150, 50, 0, Math.PI * 2);

    ctx.fillStyle = "blue";

    ctx.fill();

    ctx.closePath();


    // Desenha os olhos

    ctx.beginPath();

    ctx.arc(80, 140, 5, 0, Math.PI * 2);

    ctx.arc(120, 140, 5, 0, Math.PI * 2);

    ctx.fillStyle = "red";

    ctx.fill();

    ctx.closePath();


    // Desenha a boca

    ctx.beginPath();

    ctx.arc(100, 160, 20, 0, Math.PI);

    ctx.lineWidth = 3;

    ctx.strokeStyle = "pink";

    ctx.stroke();

    ctx.closePath();


    // Adiciona a frase

    ctx.font = "14px Arial";

    ctx.fillStyle = "red";

    ctx.fillText("Espírito Poesia", 50, 200);

});

    

    </script>

</body>

</html>

Ferramenta codigo criar desenho animado!

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Boneco Animado</title>

</head>

<body>

    <canvas id="bonecoCanvas" width="400" height="400"></canvas>

    <script>

    document.addEventListener("DOMContentLoaded", function () {

    const canvas = document.getElementById("bonecoCanvas");

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


    let yPosition = 0;


    function animate() {

        // Limpa o canvas

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


        // Desenha o boneco

        drawBoneco(200, 200 + yPosition);


        // Adiciona a frase

        ctx.font = "20px Arial";

        ctx.fillStyle = "blue";

        ctx.fillText("Seja feliz, por favor", 50, 350);


        // Move o boneco para cima e para baixo

        yPosition += 2;

        if (yPosition > 50) {

            yPosition = -50;

        }


        // Solicita a próxima animação

        requestAnimationFrame(animate);

    }


    // Função para desenhar o boneco

    function drawBoneco(x, y) {

        // Desenha o corpo

        ctx.beginPath();

        ctx.arc(x, y, 30, 0, Math.PI * 2);

        ctx.fillStyle = "pink";

        ctx.fill();

        ctx.closePath();


        // Desenha os olhos

        ctx.beginPath();

        ctx.arc(x - 10, y - 5, 4, 0, Math.PI * 2);

        ctx.arc(x + 10, y - 5, 4, 0, Math.PI * 2);

        ctx.fillStyle = "black";

        ctx.fill();

        ctx.closePath();


        // Desenha a boca

        ctx.beginPath();

        ctx.arc(x, y + 5, 10, 0, Math.PI);

        ctx.lineWidth = 2;

        ctx.strokeStyle = "red";

        ctx.stroke();

        ctx.closePath();

    }


    // Inicia a animação

    animate();

});

    

    </script>

</body>

</html>