Перемещение объектов на холсте html5

Я поместил текст на объект canvas html5, используя параметр fillText, вопрос в том, что мне нужно переместить текстовую позицию или изменить цвет текста, который уже отображается.

Вскоре мне нужно знать, как манипулировать определенным дочерним элементом холста

Ответы

Ответ 1

Как сказал Tz, все упорство, которое вы должны построить в себе. Но это никоим образом не означает, что это трудно сделать. Я написал пару коротких руководств, которые помогут вам начать работу, если вы выполняете задание.

Ответ 2

Я думаю, что за холстом нет объектной модели, поэтому вы не можете получить доступ к "дочернему объекту", как "текстовый объект", и изменить его. Что вы можете сделать, так это то, что вы снова рисуете текст с другим цветом, который перезаписывает "пиксели" холста. Если вы хотите переместить текст, сначала вам нужно либо очистить холст, либо перерисовать текст с помощью фона/прозрачного цвета, чтобы избавиться от текста в предыдущей позиции. Затем вы можете нарисовать текст в новой позиции.

Ответ 3

Надеюсь, что разрешено рекламировать какой-то проект.

Взгляните на http://ocanvas.org/, вы можете получить вдохновение там. Это объект, как библиотека холста. Позволяет обрабатывать события, создавать анимации и т.д.

Ответ 4

Это переместит маленький круг по вашему холсту

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

Я никогда не пробовал, но думаю, что это будет способ сделать это.

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)

Вот скрипка для этого. http://jsfiddle.net/r4JPG/2/

Если вы хотите облегчить и перевести, измените метод move соответственно.

Ответ 6

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