专栏首页阿珏酱的BlogHTML5画布-小球碰撞

HTML5画布-小球碰撞

       html5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。

自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义。

为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者,等。

标签

描述

<canvas>

标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API

你的浏览器不支持H5

代码部分:

<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画布-小球碰撞

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 笔记:Sublime Text3配置

    安装插件管理器: 通过快捷键 ctrl+` 或者 View > Show Console 菜单打开控制台

    阿珏
  • 给你的博客加上个Live2D看板娘吧

    本文章中所用模型解包自药水制作师手机游戏,版权归该官方所有。(没错,我也是来安利这款游戏的)

    阿珏
  • 正式开启全站HTTPS加密之旅

    2、微语不见了 当初emlog弄上微语的时候我就感觉那是多此一举了,弄的很粗糙,但等到大家都熟悉了之后,又去掉了,未免有点。。。 其实这也能用第三方插件...

    阿珏
  • JavaScript获取地址栏中的参数值并存入一个对象

    用户1719978
  • 大数据平台CDH搭建

    Cloudera版本(Cloudera’s Distribution Including Apache Hadoop,简称“CDH”),基于Web的用户界面,...

    KaliArch
  • 媒体,连接媒体及应用

    原文链接:https://www.linkedin.com/pulse/media-linked-applications-leonardo-chiarigli...

    用户1324186
  • TensorFlow学习笔记--自定义图像识别

    本篇文章主要讲解自己的图像数据如何在TnesorFlow上训练,主要从数据准备、训练模型、验证准确率和导出模型并对图片分类。重点如下:

    喵叔
  • 五行代码实现千万类别分类网络,飞桨大规模分类库揭秘

    春天来了,经过一个冬天的“窖藏”,按耐不住的小伙伴纷纷行动了起来,踏一踏满园的春色,赶一趟娇艳的花丛。

    用户1386409
  • Python3.7 contextvars 初探

    Python 3.7 于2018年6月27日发布,本篇文章将对其中新增模块contextvars 做初步介绍,为读者勾勒一个大概轮廓。

    Python中文社区
  • 我的BERT!改改字典,让BERT安全提速不掉分(已开源)

    当前,大部分中文预训练模型都是以字为基本单位的,也就是说中文语句会被拆分为一个个字。中文也有一些多粒度的语言模型,比如创新工场的ZEN和字节跳动的AMBERT,...

    AI科技评论

扫码关注云+社区

领取腾讯云代金券