Javascript 在 html5 Canvas 上移动对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6199018/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Moving Objects on html5 Canvas
提问by Sandeep Manne
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.
我使用 fillText 选项在 html5 canvas 对象上放置了一个文本，问题是我需要移动文本位置或更改已经呈现的文本的颜色。
Shortly I need to know how to Manipulate particular child of canvas element
很快我需要知道如何操作画布元素的特定子元素
回答by Simon Sarris
回答by Tz_
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.
我认为画布后面没有对象模型，因此您无法访问像“文本对象”这样的“子对象”并对其进行更改。您可以做的是使用覆盖画布“像素”的不同颜色再次绘制文本。如果要移动文本，首先必须清除画布或使用背景/透明颜色重新绘制文本以去除先前位置的文本。然后您可以在新位置绘制文本。
回答by Abhishek Kaushik
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>回答by Schovi
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.
看看http://ocanvas.org/你可以在那里获得灵感。它是类似画布库的对象。允许您处理事件、制作动画等。
回答by 0xcaff
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/
这是一个小提琴。 http://jsfiddle.net/r4JPG/2/
If you want easing and translations, change the movemethod accordingly.
如果您想要缓动和翻译，请相应地更改move方法。
回答by Shashank Bongale
<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>
