Tips：当你看到这个提示的时候，说明当前的文章是由原emlog博客系统搬迁至此的，文章发布时间已过于久远，编排和内容不一定完整，还请谅解`
HTML5画布-小球碰撞
日期：2017-7-18 阿珏 HTML 浏览：2465次 评论：2条
html5是万维 网 的核心语言、 标准通用标记语言 下的一个应用 超文本标记语言 （ HTML ）的第五次重大修改 。自1999年以后HTML 4.01 已经改变了很多，今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。 为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如： 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等。
| 标签 | 描述 |
|---|---|
| <canvas> |
标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
|
效果展示：
代码部分：
<canvas id="my-canvas" width="500px" height="400px" style="border:1px solid red" > 你的浏览器不支持H5</canvas><script type="text/javascript">
<!-- 得到画布对象 -->
var my_canvas = document.getElementById("my-canvas");
<!-- 得到画笔 -->
var my_huabi = my_canvas.getContext("2d");
var x = 50;
var y = 50;
var r = 20;
function deawBall(x,y){
<!-- 设置画笔颜色 -->
my_huabi.fillStyle = "green";
<!-- 开始一个新路径 -->
my_huabi.beginPath();
<!-- 画出小球 -->
my_huabi.arc(x, y, r, 0, 2 * Math.PI);
<!-- 关闭路径 -->
my_huabi.fill();
}
var fx_x = true;//当fx_x为true时，向x轴移动
var fx_y = true;//当fx_y为true时，向y轴移动
var speen = 1;
<!-- 定时器 -->
window.setInterval("moveBall()", 10);
function moveBall(){
<!-- 判断当前小球的运动方向 -->
if(fx_x == true){
x += speen;
if(x >= 500-r){
<!-- 当达到底部时，向上弹 -->
fx_x = false;
}
}else{
x -= speen;
if(x <= 0+r){
<!-- 当达到顶部时，向下弹 -->
fx_x = true;
}
}
if(fx_y == true){
y += speen;
if(y >= 400-r){
<!-- 当达到左侧时，向右侧弹 -->
fx_y = false;
}
}else{
y -= speen;
if(y <= 0+r){
<!-- 当达到右侧时，向左侧弹 -->
fx_y = true;
}
}
<!-- 清除画布 重画 -->
my_huabi.clearRect(0, 0, 500, 400);
deawBall(x, y);
}
</script>
本博客所有文章 如无特别注明 均为原创。 作者： 阿珏 ， 复制或转载请 以超链接形式 注明转自 阿珏博客 。
原文地址《 HTML5画布-小球碰撞 》
网友评论：
标签：fx,true,小球,画布,HTML5,var,my,huabi From： https://www.cnblogs.com/Ajue/p/18201785
bandwagonhost 3年前 (2017-08-15)
朋友 交换链接吗
阿珏 3年前 (2017-08-16)
@bandwagonhost：可以到友情链接申请页面自主申请的噢