[英]html5 canvas rotate moving bouncing ball
i am having a problem rotating a ball that is bouncing around the screen when i put the rotate method in it just dissapears off the canvas in a very wide rotating arc. 我将旋转方法放入球时,旋转绕屏幕弹跳的球时出现问题,只是以非常宽的旋转弧线从画布上消失了。 It is working when the ball is static but when i put x,y velocity the problem starts. 当球静止时它正在工作,但是当我按x,y速度运动时,问题就开始了。 Ant help someone can give me would be greatly appreciated. 有人可以给我的蚂蚁帮助将不胜感激。 Please see below the code i have so far. 请看下面我到目前为止的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<style type="text/css">
canvas {
border: 1px solid black;
}
body {
background-color: white;
}
</style>
</head>
<body>
<canvas id="canvas-for-ball"></canvas>
<script type="text/javascript">
// Gets a handle to the element with id canvasOne.
var canvas = document.getElementById("canvas-for-ball");
// Get a 2D context for the canvas.
var ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;
// The vertical location of the ball.
//var y = 10;
var yvel = 3;
var xvel = 3 ;
//ball object
var ball = {
x: 90,
y: 150,
r: 50
};
// A function to repeat every time the animation loops.
function repeatme() {
//clear canvas for each frame of the animation.
ctx.clearRect(0,0,500,500);
// Draw the ball (stroked, not filled).
//for loop to draw each line of th pie.
// i is set to 7. set i to whatever amount of sections you need.
for (var i = 0; i < 7; i++) {
//starting point
ctx.beginPath();
//move to positions the pen to the center of the ball
ctx.moveTo(ball.x, ball.y);
//circle craeted with x,y and r set. The final two arguments (Starting and ending point)
//change over each itteration of the loop giving a new point on the circle to draw to.
ctx.arc(ball.x, ball.y, ball.r, i*(2 * Math.PI / 7), (i+1)*(2 * Math.PI / 7));
//set line width
//set colour of the lines
ctx.strokeStyle = '#444';
//render the lines
ctx.stroke();
}
ctx.beginPath();
//the inner circle of the pizza
ctx.moveTo(ball.x, ball.y);
//ball.r is used - 10 pixles to put the smaller circle in the pizza.
ctx.arc(ball.x,ball.y,ball.r-10,0,2*Math.PI);
ctx.lineWidth = 2;
ctx.strokeStyle = '#444';
ctx.stroke();
ctx.translate(ball.x, ball.y);
// Rotate 1 degree
ctx.rotate(Math.PI / 180);
// Move registration point back to the top left corner of canvas
ctx.translate(-ball.x, -ball.y);
//draw the ball
//restore canvas back to original state
ctx.restore();
// Update the y location.
ball.y += yvel;
ball.x += xvel;
//put repeatme function into the animation frame and store it in animate
animate = window.requestAnimationFrame(repeatme);
//condition take into account the radius of the ball so
//it bounces at the edge of the canvas instead
//of going off of the screen to its center point.
if(ball.y >= canvas.height - ball.r){
//window.cancelAnimationFrame(animate);
yvel = yvel *-1;
}else if(ball.y <= ball.r){
yvel = yvel /-1;
}
if(ball.x >= canvas.width- ball.r){
xvel = xvel *-1;
}else if(ball.x <=ball.r){
xvel = xvel / -1;
}
}
// Get the animation going.
repeatme();
</script>
</body>
</html>
To rotate a rendered path. 旋转渲染的路径。 Set the origin to the point of rotation, rotate by the amount you want and render the path at 0,0 将原点设置为旋转点,旋转所需的量并将路径渲染为0,0
rotation += Math.PI / 180; // rotate 1 deg steps
ctx.lineWidth = 2;
ctx.strokeStyle = '#444';
ctx.setTransform(1, 0, 0, 1, ball.x, ball.y); // set the origin at the center
ctx.rotate(rotation); // set the rotation amount
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.arc(0, 0, ball.r - 10, 0, 2 * Math.PI);
ctx.stroke();
ctx.setTransform(1,0,0,1,0,0); // restore the default transform
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.