html5 动画Ilove送给他（她）

代码很乱很乱，时间关系也没整理，不是特别好看 - - 见谅~~

<!DOCTYPE html PUBLIC "--//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1--transitional.dtd">
<html xmlns="http;//www.w3.org/1999/xhtml">
<head>
<title>啊干牌弹弹球</title>
<meta http--equiv="Content--Type" content="text/html;charset=gb2312">
<script language = "JavaScript">
<!--
var img = new Image();
img.src = "IMAG0742(2).jpg";
var ballr = 10; //球的半径
var recwidth = 400;
var recheight = 400;
var ballx = 100; //球心的横坐标
var bally = 100; //球心的纵坐标
var ballvx = 50; //水平速度
var ballvy = 0; //垂直速度
var time1;
var check = 0;
var number = 1;
var cons = Math.PI/360;
var times = 0;
function myinit()
{
var context = document.getElementById('mycanvas').getContext('2d');
context.fillStylr = "#123456"
context.arc(ballx,bally,ballr,0,Math.PI*2,true);
context.fill();
time1 = setInterval(moveball,100);
}
function moveball()
{
var context = document.getElementById('mycanvas').getContext('2d');

if(ballx == 150 && bally == 100){ballvx = 0; ballvy =50;ballx = 125;bally = 100;}
if(ballx == 125 && bally == 300 && check == 0){ballvx = 50; ballvy =0;ballx = 100;check = 1;}
if(ballx == 150 && bally == 300 && check ==1){ballx = 200;bally = 100;ballvx = 0 ; ballvy = 50;number=2;}
if(ballx == 200 && bally == 300){ballvx = 50 ; ballvy = 0;};
if(ballx == 300 && bally == 300){number = 3;}
if(times == 720){ballx = 500;bally = 300;ballvx = -20 ; ballvy = -40;times = 0;}
if(ballx == 400 && bally == 100){ballx =500;bally = 300;ballvx = 20;ballvy = -40;}
if(ballx == 600 && bally == 100){bally = 200;ballvx = 50;ballvy=0;}
if(ballx == 700){number =5;}

if(number == 5 )
{
ballx = 650+50*Math.cos(times*cons);
bally = 200+50*Math.sin(times*cons);
times+=10;
if(times == 720){number = 6;context.drawImage(img,800,100,200,200);}
context.fillStyle = "#00CC99";
context.beginPath();
context.arc(ballx,bally,ballr,0,Math.PI*2,false);
context.closePath();
context.fill();
return;
}
if(number == 3)
{
ballx = 350+50*Math.cos(times*cons);
bally = 200+50*Math.sin(times*cons);
times+=10;
if(times == 720)number = 4;
context.fillStyle = "#CC0099";
context.beginPath();
context.arc(ballx,bally,ballr,0,Math.PI*2,false);
context.closePath();
context.fill();
return;
}

ballx = ballx + 0.1*ballvx;
bally = bally + 0.1*ballvy;
if(number == 2)context.fillStyle = "#2233CC";
if(number == 4)context.fillStyle = "#FF33CC";
if(number == 5)context.fillStyle = "#99CCCC";
context.beginPath();
context.arc(ballx,bally,ballr,0,Math.PI*2,true);
context.closePath();
context.fill();
}

//-->
</script>
<body onload = "myinit();">
<canvas id = "mycanvas" name = "mycanvas" width = "1000" height = "500">
</canvas>
</body>
</html>

html5 动画Ilove送给他（她）相关推荐

7个华丽的基于Canvas的HTML5动画
说起HTML5,可能让你印象更深的是其基于Canvas的动画特效,虽然Canvas在HTML5中的应用并不全都是动画制作,但其动画效果确实让人震惊.本文收集了7个最让人难忘的HTML5 Canvas动 ...
HTML5 Maker – 在线轻松制作 HTML5 动画效果
HTML5 Maker 是一个在线动画制作工具,帮助你使用 HTML,CSS 和 JavaScript 创建动态,互动的内容.它非常容易使用,同时可以帮你实现非常好的效果.它可以制作跨浏览器的动画内容 ...
绝对震撼 7款HTML5动画应用及源码
除非特别声明,PHP100新闻均为原创或投稿报道,转载请注明作者及原文链接原文地址: http://www.php100.com/html/it/mobile/2014/0702/7030.html ...
html5动画是什么,10个HTML5动画让你忘掉Flash是啥(组图)
你最近可能已经听到了很多关于Flash是面临垂死挣扎的技术以及它将如何很快被HTML5的取代.就个人而言,我认为HTML5会慢慢取代一些Flash的东西,但Flash会永远有它的一席之地,特别是开发复 ...
linux h5 动画软件下载,技术|7款绚丽的jQuery/HTML5动画及源码
jQuery是一款非常流行的JavaScript框架,利用jQuery,我们可以制作简单的动画效果,但是结合HTML5,这样的动画效果就会变得更加出彩.本文分享了7款jQuery结合HTML5的动画以 ...
html5作品展示的动效,html5动效系列八：8个非常神奇的HTML5动画和应用
每一个扁平化界面设计,都是我们的心灵碰撞致力于最棒的 metro ui 设计今天我们继续来为大家分享一些效果相当不错的 1.CSS3图片悬停放大今天我们要来分享一款很酷的CSS3图片,这款图片可以 ...
做好这5点基本要求才能算一个合格的HTML5动画
随着CSS3和HTML5建站技术的发展,动效在网页设计中的作用越来越显著.与静态界面相比,动态的转变更符合人们的认知体系,可以有效降低用户认知负载.这是因为,在网站界面使用动画效果能让元素的变化.界面 ...
HTML5动画软件工具编辑器 HTML5动画分类工具推荐
接下来介绍几款制作HTML5动画的工具,它们可以分为几类: 1.导出canvas动画: Flash CC(13.1).Animation.Radi 2.导出DIV+CSS3动画: HTML5 Make ...
效果奇特的HTML5动画,12个效果奇特的HTML5动画赏析
本文将为大家分享12个效果奇特的HTML5动画,HTML5强大的动画特性可以让你的网页变得更加生动和富有活力,交互性也会进一步得到提高.一起来看看下面的这些HTML5动画案例,每个案例都提供源代码下载 ...

html5 动画Ilove送给他（她）

html5 动画Ilove送给他（她）相关推荐

最新文章

热门文章