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 条评论
登录 后参与评论

相关文章

来自专栏cnblogs

bootstrap源码分析之form、navbar

一、表单(Form) 源码文件: _form.scss mixins/_form.scss 1、按层次结构分:form-group -> form-contr...

24070
来自专栏达摩兵的技术空间

css3媒体查询简介

<link rel="stylesheet" media="min-width=900" />

9050
来自专栏前端说吧

css笔记 - animation学习笔记(二)

from - to 等价于 0% - 100% 但是优先使用0% - 100%,因为浏览器兼容性还好点

7220
来自专栏大数据钻研

HTML基础

HTML基础 ---- HTML基本知识与结构 HTML常见标签 标签写法与嵌套的讨论 HTML、CSS、javascript三者的关系 HTML是网页内容...

1.1K30
来自专栏余生开发

markdown基本语法

markdown是一种纯文本格式的标记语言。通过简单的标记语法,它可以使普通文本内容具有一定的格式。

11340
来自专栏coding for love

CSS进阶06-相对定位Relative Positioning

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

7820
来自专栏24K纯开源

ChartDirector应用笔记(三)

前言 继上篇文章(Simple bar chart)推出之后,本篇文章继续ChartDirector的使用。在这篇Blog中,博主实现的是soft lighti...

244100
来自专栏Google Dart

AngularDart Material Design 工具提示 顶

工具提示卡的目标可以是任何元素,例如按钮,输入,链接等。目标也可以是help_outline图标,其充当实际目标的代理。

11120
来自专栏WindCoder

photoshop技巧之 在排版文字时常会用到的快捷键技巧

这两天兴致来了,又开始了PS学习之旅,看到教程中的思考,不由去网上搜索了一番,暂且记录在这里。

14200
来自专栏一“技”之长

Bootstrap响应式前端框架笔记十八——导航滚动监听

    Bootstrap框架中提供了十分方便的方法来使用导航关联内容快,并且开发者可以监听滚动进行导航按钮的切换,示例如下:

11510

扫码关注云+社区

领取腾讯云代金券