Moving Objects on html5 Canvas_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-09 13:35 出处：网络

I placed an text on html5 canvas object using fillText option, question is I need to move the text position or change the color of the text that is already rendered.

Sho开发者_如何转开发rtly I need to know how to Manipulate particular child of canvas element

This will move a small circle over your canvas

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>

I think there is no object model behind the canvas, so you cannot access a "child object" like a "text object" and change it. What you can do is that you draw the text again with a different color that overwrites the "pixels" of the canvas. If you want to move the text, first you have to either clear the canvas or re-draw the text with a background/transparent color to get rid of the text in the previous position. Then you can draw the text in the new position.

I've never tried it but I think this would be the way to do it.

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)

Here is a fiddle for it. http://jsfiddle.net/r4JPG/2/

If you want easing and translations, change the move method accordingly.

Hope it is allowed to advertise somebody's project.

Take a look at http://ocanvas.org/ you can get inspiration there. It is object like canvas library. Allows you to handle events, make animations etc.

<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>