欢迎您来到用的多资源网,本站秉承互联网最初开放、共享、免费的精神持续为广大爱好学习的朋友提供免费帮助,请相互转告。

       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>
友情提示您:用的多资源网为您持续提供更多的免费合法资源,用的多资源网提供所有资源均来自互联网搜集,如果有不慎冒犯之处,请及时联系删除谢谢理解,我们非常尊重原创和技术缔造者,用的多资源网不能确保每一个资源都是安全有效的,毕竟互联网链接多变性和软件编写的复杂性,请用户注意甄别。如发现违规内容请及时向我们反馈,我们会及时处理。支持用的多资源网、希望用的多资源网走的更远更好,请在搜索引擎输入 用的多资源网 找到我们的网址yongdeduo点击一次就算支持了。不胜感激。
用的多资源网 » HTML5画布-小球碰撞

发表评论