<html>
<head>
<title>小球在一个区域运动</title>
<script src="../js/jscex.jscexRequire.min.js" type="text/javascript"></script>
</head>
<body>
<canvas id="mc" width="900px" height="500px">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('mc');
var cxt = canvas.getContext('2d');
//定义一个小球
var ball = {
position : {x : 100,y : 100}, //球的位置
r : 30, //球的半径
vx : 300, //球在X轴的速度
vy : 200 //球在Y轴的速度
};
var cyc = 10;
var somethingAsync = eval(Jscex.compile("async", function () {
//结合物理里面的知识即可
while (true) {
cxt.fillStyle = "rgba(0, 0, 0, .1)";
cxt.fillRect(0, 0, canvas.width, canvas.height);
cxt.fillStyle = "#FA340A";
cxt.beginPath();
第四讲:使用html5中的canvas标签画出一个球在指定区域内的运动
最新推荐文章于 2023-05-30 18:01:27 发布
本文主要讲解如何利用HTML5的canvas元素,结合JavaScript编程,实现一个小球在指定矩形区域内自由运动的效果。内容涵盖canvas基本用法、小球运动逻辑及碰撞检测的实现。
摘要由CSDN通过智能技术生成