验证中...
开源中国 2018 年度最后一场技术盛会邀你来约~错过就要等明年啦!点此立即预约
语言: HTML
分类: Web开发技术
最后更新于 2018-12-06 20:09
canvas类平抛物理实验
原始数据 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas类平抛物理实验</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;"></canvas >
<script>
var ball = {
x: 512,
y: 100,
r: 20,
g: 2,
vx: -4,
vy: 0,
color: '#005588'
};
window.onload = function() {
const canvas = document.getElementById('canvas');
canvas.width = 1024;
canvas.height = 768;
console.log('canvas', canvas);
const context = canvas.getContext('2d');
// 动画效果的匿名函数
setInterval(
function() {
render(context);
update();
},
50
)
}
function update() {
ball.x += ball.vx;
ball.y += ball.vy;
ball.vy += ball.g;
}
function render(context) {
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.fillStyle = ball.color;
context.beginPath();
context.arc(ball.x, ball.y, ball.r, 0, 2*Math.PI);
context.closePath();
context.fill();
}
</script>
</body>
</html>

评论列表( 0 )

你可以在登录后,发表评论

搜索帮助