Я поместил текст на объект canvas html5, используя параметр fillText, вопрос в том, что мне нужно переместить текстовую позицию или изменить цвет текста, который уже отображается.
Вскоре мне нужно знать, как манипулировать определенным дочерним элементом холста
Как сказал Tz, все упорство, которое вы должны построить в себе. Но это никоим образом не означает, что это трудно сделать. Я написал пару коротких руководств, которые помогут вам начать работу, если вы выполняете задание.
Я думаю, что за холстом нет объектной модели, поэтому вы не можете получить доступ к "дочернему объекту", как "текстовый объект", и изменить его. Что вы можете сделать, так это то, что вы снова рисуете текст с другим цветом, который перезаписывает "пиксели" холста. Если вы хотите переместить текст, сначала вам нужно либо очистить холст, либо перерисовать текст с помощью фона/прозрачного цвета, чтобы избавиться от текста в предыдущей позиции. Затем вы можете нарисовать текст в новой позиции.
Надеюсь, что разрешено рекламировать какой-то проект.
Взгляните на http://ocanvas.org/, вы можете получить вдохновение там. Это объект, как библиотека холста. Позволяет обрабатывать события, создавать анимации и т.д.
Это переместит маленький круг по вашему холсту
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>Я никогда не пробовал, но думаю, что это будет способ сделать это.
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 соответственно.
<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>