web-dev-qa-db-fra.com

Déplacement d'objets sur html5 Canvas

J'ai placé un texte sur un objet HTML html5 à l'aide de l'option fillText. Je dois déplacer la position du texte ou modifier la couleur du texte déjà rendu. 

Bientôt, j'ai besoin de savoir comment manipuler un élément particulier de l'élément canvas

javascripthtml5canvas
10
Sandeep Manne

Comme Tz a dit, toute la persévérance que vous devez construire en vous-même. Mais cela ne signifie nullement qu'il est difficile à faire. J'ai écrit quelques courts tutoriels qui vous aideront à démarrer si vous êtes à la hauteur de la tâche.

11
Simon Sarris

Je pense qu'il n'y a pas de modèle d'objet derrière le canevas, vous ne pouvez donc pas accéder à un "objet enfant" comme un "objet texte" et le modifier. Ce que vous pouvez faire, c'est dessiner à nouveau le texte avec une couleur différente qui écrase les "pixels" du canevas. Si vous souhaitez déplacer le texte, vous devez d’abord vider le canevas ou redessiner le texte avec une couleur de fond/transparente pour supprimer le texte de la position précédente. Ensuite, vous pouvez dessiner le texte à la nouvelle position.

5
Tz_

Ceci déplacera un petit cercle sur votre toile 

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();
<canvas id="canvas" style="background:rgba(34,45,23,0.4)"></canvas>

5
Abhishek Kaushik

J'espère qu'il est autorisé à annoncer le projet de quelqu'un.

Jetez un coup d’œil à http://ocanvas.org/ vous pouvez y trouver votre inspiration. Vous permet de gérer des événements, faire des animations, etc.

4
Schovi

Je n'ai jamais essayé, mais je pense que ce serait la meilleure façon 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)

Voici un violon pour cela. http://jsfiddle.net/r4JPG/2/

Si vous souhaitez faciliter et convertir les modifications, modifiez la méthode move en conséquence.

3
0xcaff
<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>
0
Shashank Bongale