Déplacement d'objets sur toile html5

J'ai placé un texte sur html5 canvas objet à l'aide de fillText option, la question est de savoir j'ai besoin de déplacer la position du texte ou changer la couleur du texte qui est déjà rendu.

Peu de temps j'ai besoin de savoir comment Manipuler l'enfant de l'élément canvas

source d'informationauteur Sandeep Manne

  1. 12

    Comme Tz dit, l'ensemble de la persistance que vous avez à construire dans vous-même. Mais cela ne signifie en aucune manière qu'il est dur à faire. J'ai écrit un couple court tutoriels qui vous permettra de commencer si vous êtes à la hauteur de la tâche.

  2. 5

    Je pense qu'il n'y a pas de modèle d'objet derrière la toile, de sorte que vous ne pouvez pas accéder à un "enfant de l'objet" comme un "objet texte" et de les modifier.
    Ce que vous pouvez faire est que vous dessinez le texte de nouveau avec une autre couleur qui remplace les "pixels" de la toile.
    Si vous souhaitez déplacer le texte, vous devez d'abord supprimer la toile ou re-dessiner le texte avec un arrière-plan/couleur transparente pour se débarrasser du texte dans la position précédente. Vous pouvez alors dessiner le texte dans la nouvelle position.

  3. 4

    Espère qu'il est autorisé à faire de la publicité de quelqu'un projet.

    Prendre un coup d'oeil à http://ocanvas.org/ vous pouvez trouver de l'inspiration.
    Il est l'objet comme la toile de la bibliothèque. Vous permet de gérer des événements, faire des animations etc.

  4. 3

    Je n'ai jamais essayé, mais je pense que ce serait le moyen de le faire.

    var canvas = document.getElementById("canvas"); //get the canvas dom object
var ctx = canvas.getContext("2d"); //get the context
var c = {  //create an object to draw
  x:0,  //x value
  y:0,  //y value
  r:5; //radius
}
var redraw = function(){  //this function redraws the c object every frame (FPS)
  ctx.clearRect(0, 0, canvas.width, canvas.height); //clear the canvas
  ctx.beginPath();  //start the path
  ctx.arc(c.x, c.y, c.r, 0, Math.PI*2); //draw the circle
  ctx.closePath(); //close the circle path
  ctx.fill(); //fill the circle
  requestAnimationFrame(redraw);//schedule this function to be run on the next frame
}
function move(){  //this function modifies the object
  var decimal = Math.random() //this returns a float between 0.0 and 1.0
  c.x = decimal * canvas.width; //mulitple the random decimal by the canvas width and height to get a random pixel in the canvas;
  c.y = decimal * canvas.height;
}
redraw(); //start the animation
setInterval(move, 1000); //run the move function every second (1000 milliseconds)

    Ici est un violon.
    http://jsfiddle.net/r4JPG/2/

    Si vous voulez d'assouplissement et de traductions, de changer le move méthode en conséquence.

  5. 3

    Cela vous permettra de déplacer un petit cercle au-dessus de votre toile

    <html>
<head>
</head>
<body>
    <canvas id="canvas" style="background:rgba(34,45,23,0.4)"></canvas>
    <script>
        var can = document.getElementById('canvas');
        can.height = 1000; can.width = 1300;
        var ctx = can.getContext('2d');
        var x = 10, y = 100;
        ctx.fillStyle = "black";
        ctx.fillRect(700, 100, 100, 100);

        function draw() {
            ctx.beginPath();
            ctx.arc(x, y, 20, 0, 2 * Math.PI);
            ctx.fillStyle = 'rgba(250,0,0,0.4)';
            ctx.fill();

            x += 2;
            ctx.fillStyle = "rgba(34,45,23,0.4)";
            ctx.fillRect(0, 0, can.width, can.height);
            requestAnimationFrame(draw);
            //ctx.clearRect(0,0,can.width,can.height);
        }
        draw();

    </script>
</body>
</html>

    Voir exemple ici!

  6. 0
    <html>
<head>
<title>Canvas Exam</title>
</head>
<body>
<canvas id="my_canvas" height="500" width="500" style="border:1px solid black">
</canvas>
<script>
 var dom=document.getElementById("my_canvas");
 var ctx=dom.getContext("2d");
 var x1=setInterval(handler,1);
 var x=50;
 var y=50;
 r=40;
 function handler()
{
  ctx.clearRect(0,0,500,500);
  r1=(Math.PI/180)*0;
  r2=(Math.PI/180)*360;
  ctx.beginPath();

  //x=x*Math.random();
  x=x+2;
  r=r+10*Math.random();
  ctx.arc(x,y,r,r1,r2);
  ctx.closePath();
  ctx.fillStyle="blue";
  ctx.fill();
  ctx.stroke();

  if(x>400)
 {
  x=50;
  y=y+10;
 }
  r=40;
}
</script>
</body>
</html>