canvas学习第二课:单个反弹球

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="Css/foo.css" rel="stylesheet" />
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/modernizr-1.7.js"></script>
<title></title>
<style>
/*body, html,.MaxBody {
width:100%;
height:100%;
}
#canvasOen {
display:block;
background:#eee;
}*/
</style>
</head>
<body>

<div class="MaxBody" style="position:absolute;top:50px;left:50px;">
<canvas id="canvasOen" width="500" height="500">你的画布不支持此浏览器</canvas>
</div>

<script>

window.addEventListener("load", evetWindwLoaded, false);

//输出操作
var Debugger = function () { };
Debugger.log = function (message) {
try {
console.log(message);
}
catch(exception)
{
return;
}
}

function evetWindwLoaded()
{
canvasApp();
}

function canvasSupport()
{
return Modernizr.canvas;
}

function canvasApp()
{

if (!canvasSupport()) { return; }

var theCanvas = document.getElementById("canvasOen");
var context = theCanvas.getContext("2d");

var speed = 5;
var p1 = { x: 20, y: 20 };
var angle = 35;
var radians = 0;
var xunits = 0;
var yunits =0;
var ball = { x: p1.x, y: p1.y }
updateBall();

function updateBall()
{
radians = angle * Math.PI / 180;
xunits = Math.cos(radians) * speed;
yunits = Math.sin(radians) * speed;
}

setInterval(drawScreen, 33);
function drawScreen()
{
context.fillStyle = ‘#eeeeee‘;
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
context.strokeStyle = ‘#000000‘;
context.strokeRect(1, 1, theCanvas.width - 2, theCanvas.height - 2);
ball.x += xunits;
ball.y += yunits;
context.fillStyle = "#000000";
context.beginPath();
context.arc(ball.x, ball.y, 15, 0, Math.PI*2, true);
context.closePath();
context.fill();

if (ball.x > theCanvas.width-16 || ball.x < 16)
{
angle = 180 - angle;
updateBall();
}
else if (ball.y > theCanvas.height-16 || ball.y < 16)
{
angle = 360 - angle;
updateBall();
}
}

}

</script>

</body>
</html>

时间: 2024-10-14 10:32:01

canvas学习第二课:单个反弹球的相关文章

IOS学习第二课 UIAlertView和UIActionSheet

1    UIAlertView 类似于Android中的Dialog,简单用法如下: UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Title" message:@"Messate" delegate:nil cancelButtonTitle:@"Cancle" otherButtonTitles:nil, nil]; [alertView show]; 2   U

安卓学习第二课——短信发送器

package com.example.message; import android.app.Activity; import android.os.Bundle; import android.telephony.SmsManager; import android.text.TextUtils; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button;

注册表学习第二课

大家好,今天是注册表学习的第二课 好了,废话不多说了,我现在就来分享我的读书笔记吧 一.禁用菜单系统栏的属性 首先,按照HKEY_CURRENT_USER-software-microsoft-windows-currentversion -policies-explorer 新建一个DWORD值,命名为"NoSetTaskBar",将键值设为1 解释:修改这个注册表的用途就是,当我们点击系统栏的属性时,会出现如下提示 "本次操作由于这台电脑的限制而被取消,请与系统管理员联系

C 语言学习第二课

初次练习的源代码如下: #include<stdio.h> int main() { int num; num=1; printf("C语言是美丽的"); printf("编程语言 \n"); printf("我是最简单的数字啊\n"); printf("我最喜欢%d.\n",num); return 0; } 其调试及运行的结果如下: 下面我对其中涉及的详细介绍下:(程序细节介绍) #include<std

线程学习第二课--脱离线程,调度线程,取消线程,多线程

例如主线程继续为用户提供服务的同时创建第二个线程这个线程的作用是将用户正在编辑的数据进行备份存储那么备份结束之后第二个线程就可以字节终止没必要再回到主线程中区 称这样的线程为脱离线程,可以通过修改属性或者调用pthread_detach的方法来创建这里我们从属性的角度研究脱离线程 1 #include <pthread.h> 2 int pthread_atte_init(pthread_attr_t * attr); 函数的作用是初始化一个线程属性对象 对应的回收函数是pthread_att

JS学习第二课

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var oBtn=document.getElementById('btn1') 9 var oUl

Shell脚本学习第二课&#183;

Shell文件包含 shell也可以包含外部脚本,语法格式如下: . filename 或 source filename 例如创建两个shell脚本. 脚本1:test1.sh url = "www.baidu.com" 脚本2:test2.sh . ./test1.sh echo "$url" 执行test2.sh,即可看到结果. Shell输入输出重定向 命令 说明 command>file 将输出重定向到file command<file 将输入

c#学习第二课

#提纲:Main函数: static void Main(string [] args) { }程序代码需要写在Main函数的花括号内. 一.输出:Console.WriteLine("这是我的第一个程序.");Console.WriteLine("这是第二行代码.");Console.Write("这是要输出的文字.");注意:没有换行注意:1.大小写敏感:2.所有的符号全都用英文:3.不要漏掉;. 二.输入:string s = Consol

Web前端学习—第二课HTML篇

Q6:什么是HTML标签,如何合理使用HTML标签?哪些特殊场合需要使用特定的标签? (不考虑CSS) HTML标签(超文本标记语言标签):是html语言中最基本的单位,是html语言最重要组成部分. [使用]是由尖括号包围的关键词,如:<html>:通常是成对出现的,如<div></div>;标签对中第一个标签是开始标签,第二个是结束标签:开始标签和结束标签也被成为开放标签和闭合标签:也有单独呈现的标签,如<br />:一般成对出现的标签内容在两个标签之间