会动的小球
1.画一个填充的小球2.让小球动起来 (让这个填充圆形 动起来)3. 让小球不超出画布的边界4. 让小球在最下面的边界 弹跳5.给小球画尾巴6.让小球的移动,跟随鼠标移动的位置,单击后,释放小球
1.画一个填充的小球
示例1: 画一个填充的小球
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400" height="200" style="border:1px solid">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var ball = {
x: 100,
y: 100,
radius: 25,
color: 'rgba(250,10,10,0.5)',
draw: function() {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
ctx.fill();
}
};
ball.draw();
</script>
</body>
</html>
json 格式数组: 存放 json 格式数据的数组,
可以通过下面的格式访问 r[0].x = 100, r[1].y = 100,名称: 数值,中间用冒号 :变量之间,用逗号var xxx = {x1:...,x2:...};注意: 数值,也可以是 函数定义的语句,定义一个函数
2.让小球动起来 (让这个填充圆形 动起来)
示例2: 让小球动起来 (让这个填充圆形 动起来)
更新动画 : window.requestAnimationFrame() 请求动画帧 方法清空画布: 在每一帧里面，用 clear 清理掉 之前帧里旧的圆形。
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var raf;
var ball = {
x: 100,
y: 100,
vx: 5,
vy: 2,
radius: 25,
color: 'rgba(250,10,10,0.5)',
draw: function() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fill();
}
};
function draw() {
ctx.clearRect(0,0, canvas.width, canvas.height);
ball.draw();
ball.x += ball.vx;
ball.y += ball.vy;
raf = window.requestAnimationFrame(draw);
}
canvas.addEventListener('mouseover', function(e){
raf = window.requestAnimationFrame(draw);
});
canvas.addEventListener('mouseout', function(e){
window.cancelAnimationFrame(raf);
});
ball.draw();
</script>
小球的移动: 一次次 不断增加 圆形的圆心坐标 (x,y),增加这两个值鼠标的经过和移出: 将更新动画,添加到canvas的监听事件中,两个相关联
canvas.addEvenListener('mouseover',function(e){ 执行的代码.....});canvas.addEvenListener('mouseout',function(e){ 执行的代码.....});
3. 让小球不超出画布的边界
示例3: 让小球不超出画布的边界
控制圆心的坐标,让圆心的坐标,始终在画布内部
ball
.x
+= ball
.vx
;
ball
.y
+= ball
.vy
;
if (ball
.y
+ ball
.vy
> canvas
.height
|| ball
.y
+ ball
.vy
< 0) {
ball
.vy
= -ball
.vy
;
}
if (ball
.x
+ ball
.vx
> canvas
.width
|| ball
.x
+ ball
.vx
< 0) {
ball
.vx
= -ball
.vx
;
}
4. 让小球在最下面的边界 弹跳
示例4: 让小球在最下面的边界 弹跳
改变 y坐标的增加量,逐帧减少 垂直方向的增加量,让小球只在地板上弹跳
ball
.x
+= ball
.vx
;
ball
.y
+= ball
.vy
;
ball
.vy
*= .99;
ball
.vy
+= .25;
5.给小球画尾巴
示例5: 给小球画尾巴: 填充函数 替代清除函数
清除前一帧动画: 一般使用的是 clearRect() 函数 清除前一帧动画。用一个半透明的 fillRect() 函数取代之，能制作长尾效果。
ctx
.fillStyle
= 'rgba(255,255,255,0.3)';
ctx
.fillRect(0,0,canvas
.width
,canvas
.height
);
6.让小球的移动,跟随鼠标移动的位置,单击后,释放小球
示例6: 小球的移动,跟随鼠标移动的位置,单击后,释放小球
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400" height="200" style="border:1px solid">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var raf;
var running = false;
var ball = {
x: 100,
y: 100,
vx: 5,
vy: 1,
radius: 25,
color: 'red',
draw: function() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fill();
}
};
function clear() {
ctx.fillStyle = 'rgba(255,255,255,0.3)';
ctx.fillRect(0,0,canvas.width,canvas.height);
}
function draw() {
clear();
ball.draw();
ball.x += ball.vx;
ball.y += ball.vy;
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
ball.vy = -ball.vy;
}
if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
ball.vx = -ball.vx;
}
raf = window.requestAnimationFrame(draw);
}
canvas.addEventListener('mousemove', function(e){
if (!running) {
clear();
ball.x = e.clientX;
ball.y = e.clientY;
ball.draw();
}
});
canvas.addEventListener('click',function(e){
if (!running) {
raf = window.requestAnimationFrame(draw);
running = true;
}
});
canvas.addEventListener('mouseout', function(e){
window.cancelAnimationFrame(raf);
running = false;
});
ball.draw();
</script>
</body>
</html>
鼠标的窗口坐标: event.clientX、event.clientY
鼠标相对于 浏览器窗口 可视区域 的X，Y坐标（窗口坐标）可视区域: 不包括工具栏和滚动条。IE事件和标准事件 都定义了这2个属性
参考文档 MSN canvas 教程
感谢：♥♥♥ 如果这篇文章对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读~
转载 请注明出处 ,Thanks♪(･ω･)ﾉ
作者：Hey_Coder来源：原文：https://blog.csdn.net/VickyTsai/article/details/90451691
