HTML 5画布和移动对象 [英] HTML 5 canvas and moving objects
问题描述
今天看一下HTML 5 canvas，我想在画布上移动3个圆圈。从我读过的内容到目前为止，我需要每次重绘圆圈（每60毫秒似乎是一个开始的好地方）并清除旧圈子，以便在屏幕上显示新位置的新圈子占据位置。
到目前为止，我有一个draw（）;这将呈现3个不同颜色的圆圈，这个想法是控制每个圆圈。
我在这里寻找一些关于如何初始设置的指导并让每个球移动。
任何帮助表示赞赏
这就是我到目前为止
< html>
< head>
< title> Ball Demo< / title>
< style type =text / css>
＃ball-canvas {
border：1px solid＃666;
}
< / style>
< / head>
< body>
< canvas id =ball-canvaswidth =900height =600>< / canvas>
< script>
$ b函数renderCircle（context，x，y，radius，fill）{
var strokeWidth = 2
context.beginPath（）;
context.arc（x，y，radius - （2 * strokeWidth），0，2 * Math.PI，false）;
context.fillStyle = fill;
context.fill（）;
context.lineWidth = strokeWidth;
context.strokeStyle ='＃666';
context.stroke（）;
function draw（）{
renderCircle（context，radius，canvas.height / 2，radius，'yellow'）;
renderCircle（context，canvas.width / 2，canvas.height / 2，radius，'blue'）;
renderCircle（context，canvas.width - radius，canvas.height / 2，radius，'red'）;
}
var canvas = document.getElementById（'ball-canvas'）;
var context = canvas.getContext（'2d'）
var radius = 50;
setInterval（draw，1000/60）;
< / script>
< / body>
下面是关于如何在html canvas上移动圆圈的简要说明： http://jsfiddle.net/m1erickson/JQQP9/
创建一个对象定义每个圆圈：
var circle1 = {
x：50，
y：50，
半径：25，
}
var circle2 = {
x：100，
y：100，
radius：25，
}
将这些圆对象添加到数组中：
var circles = [];
circles.push（circle1）;
circles.push（circle2）;
创建一个将绘制数组中所有圆的函数。
这个函数清除画布并在其当前分配的x，y处重绘所有圆圈：
function draw ）{
context.clearRect（0,0，canvas.width，canvas.height）;
for（var i = 0; i
context.beginPath（）;
context.arc（c.x，c.y，c.radius，0，Math.PI * 2）;
context.closePath（）;
context.fill（）;
$ b $ p
$ b 要移动你改变x的圆圈， y的属性和重画圆圈：
circles [0] .x + = 1;
circles [1] .y + = 1;
draw（）;
要动画化动作，您可以考虑检出 requestAnimationFrame 有效地创建一个动画循环。恕我直言，这是所有的简单动画的首选循环方法。
var frameCount = 0;
animate（）;
function if（frameCount< 160）{requestAnimationFrame（animate）;}
circles [0] .x + = 1;
circles [1] .y + = 1;
draw（）;
frameCount ++;
}
Having a look at HTML 5 canvas today and I would like to move 3 circles on the canvas.From what i have read so far I need to redraw the circles each time (every 60 miliseconds seems like a good place to start) and clearout the old circle so that the new one with its new position on the screen takes its place
So far i have a draw(); that will render 3 circles each of a different colour, the idea is to take control of each circle.
I am looking for some guidance here on how to initially set this up and get each ball moving.
Any help appreciated
This is what i have so far
<html>
<head>
<title>Ball Demo</title>
<style type="text/css">
#ball-canvas {
border: 1px solid #666;
}
</style>
</head>
<body>
<canvas id="ball-canvas" width="900" height="600"></canvas>
<script>
function renderCircle(context, x, y, radius, fill) {
var strokeWidth = 2
context.beginPath();
context.arc(x, y, radius - (2 * strokeWidth), 0, 2 * Math.PI, false);
context.fillStyle = fill;
context.fill();
context.lineWidth = strokeWidth;
context.strokeStyle = '#666';
context.stroke();
}
function draw() {
renderCircle(context, radius, canvas.height / 2, radius, 'yellow');
renderCircle(context, canvas.width / 2, canvas.height / 2, radius, 'blue');
renderCircle(context, canvas.width - radius , canvas.height / 2, radius, 'red');
}
var canvas = document.getElementById('ball-canvas');
var context = canvas.getContext('2d')
var radius = 50;
setInterval(draw, 1000 / 60);
</script>
</body>
解决方案 Here's a brief description of how to move circles on html canvas:
A Demo: http://jsfiddle.net/m1erickson/JQQP9/
Create an object that defines each circle:
var circle1={
x:50,
y:50,
radius:25,
}
var circle2={
x:100,
y:100,
radius:25,
}
Add these circle objects to an array:
var circles=[];
circles.push(circle1);
circles.push(circle2);
Make a function that will draw all circles in the array.
This function clears the canvas and redraws all circles at their currently assigned x,y:
function draw(){
context.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<circles.length;i++){
var c=circles[i];
context.beginPath();
context.arc(c.x,c.y,c.radius,0,Math.PI*2);
context.closePath();
context.fill();
}
}
To "move" the circles you change the x,y properties of a circle and redraw the circles:
circles[0].x+=1;
circles[1].y+=1;
draw();
To animate the movements, you might consider checking out requestAnimationFrame which efficiently creates an animation loop. IMHO, it is the preferred looping method for all but simple animations.
var frameCount=0;
animate();
function animate(){
if(frameCount<160){requestAnimationFrame(animate);}
circles[0].x+=1;
circles[1].y+=1;
draw();
frameCount++;
}
这篇关于HTML 5画布和移动对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
