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

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

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

10
canvas html5 javascript

6 ответов

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

13

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

5

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

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

4

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

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 метод соответственно.

3

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

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

пример здесь!

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