JavaScript之canvas

num.push(x,y);

动画草图（举个栗子，我们把数字“2”给画出来）：

<!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> new document </title>
<meta name="generator" content="editplus" charset="utf-8"/>
</head>
<body>
<script src="http://files.cnblogs.com/files/caidupingblogs/JSLINQ.js"type="text/javascript"></script>
<script src="http://files.cnblogs.com/files/caidupingblogs/jscex.min.js"type="text/javascript"></script>
<canvas style="border: solid 15px #222; background-color: #111; color: #CCC;" width="430" height="450" id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var cxt=canvas.getContext("2d");
cxt.fillStyle="#00FF00";
var dropBall=[];
var one=[];one.push({x:3,y:0});
one.push({x:3,y:1});
one.push({x:3,y:2});
one.push({x:3,y:3});
one.push({x:3,y:4});
one.push({x:3,y:5});
one.push({x:3,y:6});
var two=[];
two.push({x:0,y:0});
two.push({x:1,y:0});
two.push({x:2,y:0});
two.push({x:3,y:0});
two.push({x:3,y:1});
two.push({x:3,y:2});
two.push({x:3,y:3});
two.push({x:2,y:3});
two.push({x:1,y:3});
two.push({x:0,y:3});
two.push({x:0,y:4});
two.push({x:0,y:5});
two.push({x:0,y:6});
two.push({x:1,y:6});
two.push({x:2,y:6});
two.push({x:3,y:6});
var three=[];
three.push({x:0,y:0});
three.push({x:1,y:0});
three.push({x:2,y:0});
three.push({x:3,y:0});
three.push({x:3,y:1});
three.push({x:3,y:2});
three.push({x:3,y:3});
three.push({x:2,y:3});
three.push({x:1,y:3});
three.push({x:0,y:3});
three.push({x:3,y:4});
three.push({x:3,y:5});
three.push({x:0,y:6});
three.push({x:1,y:6});
three.push({x:2,y:6});
three.push({x:3,y:6});
var four=[];
four.push({x:0,y:0});
four.push({x:0,y:1});
four.push({x:0,y:2});
four.push({x:0,y:3});
four.push({x:1,y:3});
four.push({x:2,y:3});
four.push({x:3,y:3});
four.push({x:3,y:4});
four.push({x:3,y:5});
four.push({x:3,y:6});
four.push({x:3,y:0});
four.push({x:3,y:1});
four.push({x:3,y:2});
var five=[];
five.push({x:0,y:0});
five.push({x:1,y:0});
five.push({x:2,y:0});
five.push({x:3,y:0});
five.push({x:0,y:1});
five.push({x:0,y:2});
five.push({x:3,y:3});
five.push({x:2,y:3});
five.push({x:1,y:3});
five.push({x:0,y:3});
five.push({x:3,y:4});
five.push({x:3,y:5});
five.push({x:0,y:6});
five.push({x:1,y:6});
five.push({x:2,y:6});
five.push({x:3,y:6});
var six=[];
six.push({x:0,y:0});
six.push({x:1,y:0});
six.push({x:2,y:0});
six.push({x:3,y:0});
six.push({x:0,y:1});
six.push({x:0,y:2});
six.push({x:3,y:3});
six.push({x:2,y:3});
six.push({x:1,y:3});
six.push({x:0,y:3});
six.push({x:3,y:4});
six.push({x:3,y:5});
six.push({x:0,y:6});
six.push({x:1,y:6});
six.push({x:2,y:6});
six.push({x:3,y:6});
six.push({x:0,y:4});
six.push({x:0,y:5});
var seven=[];
seven.push({x:3,y:0});
seven.push({x:3,y:1});
seven.push({x:3,y:2});
seven.push({x:3,y:3});
seven.push({x:3,y:4});
seven.push({x:3,y:5});
seven.push({x:3,y:6});
seven.push({x:0,y:0});
seven.push({x:1,y:0});
seven.push({x:2,y:0});
var eight=[];
eight.push({x:0,y:0});
eight.push({x:1,y:0});
eight.push({x:2,y:0});
eight.push({x:3,y:0});
eight.push({x:0,y:1});
eight.push({x:0,y:2});
eight.push({x:3,y:3});
eight.push({x:2,y:3});
eight.push({x:1,y:3});
eight.push({x:0,y:3});
eight.push({x:3,y:4});
eight.push({x:3,y:5});
eight.push({x:0,y:6});
eight.push({x:1,y:6});
eight.push({x:2,y:6});
eight.push({x:3,y:6});
eight.push({x:0,y:4});
eight.push({x:0,y:5});
eight.push({x:3,y:1});
eight.push({x:3,y:2});
var nine=[];
nine.push({x:0,y:0});
nine.push({x:1,y:0});
nine.push({x:2,y:0});
nine.push({x:3,y:0});
nine.push({x:0,y:1});
nine.push({x:0,y:2});
nine.push({x:3,y:3});
nine.push({x:2,y:3});
nine.push({x:1,y:3});
nine.push({x:0,y:3});
nine.push({x:3,y:4});
nine.push({x:3,y:5});
nine.push({x:0,y:6});
nine.push({x:1,y:6});
nine.push({x:2,y:6});
nine.push({x:3,y:6});
nine.push({x:3,y:1});
nine.push({x:3,y:2});
var zero=[];
zero.push({x:0,y:0});
zero.push({x:1,y:0});
zero.push({x:2,y:0});
zero.push({x:3,y:0});
zero.push({x:0,y:1});
zero.push({x:0,y:2});
zero.push({x:3,y:3});
zero.push({x:0,y:3});
zero.push({x:3,y:4});
zero.push({x:3,y:5});
zero.push({x:0,y:6});
zero.push({x:1,y:6});
zero.push({x:2,y:6});
zero.push({x:3,y:6});
zero.push({x:0,y:4});
zero.push({x:0,y:5});
zero.push({x:3,y:1});
zero.push({x:3,y:2});
function getRandomNumber(min,max){return(min+Math.floor(Math.random()*(max-min+1)))}
function getBalls(num){if(num===0){for(i in zero){var result=JSLINQ(one).Count(function(item){return item.x==zero[i].x&&item.y==zero[i].y;});if(result==0){var ball={x:100+zero[i].x*20,y:100+zero[i].y*20,r:8,vx:getRandomNumber(-250,250),vy:getRandomNumber(-150,150)};dropBall.push(ball);}}}
if(num===1){for(i in one){var result=JSLINQ(two).Count(function(item){return item.x==one[i].x&&item.y==one[i].y;});if(result==0){var ball={x:100+one[i].x*20,y:100+one[i].y*20,r:8,vx:getRandomNumber(-250,250),vy:getRandomNumber(-150,150)};dropBall.push(ball);}}}
if(num===2){for(i in two){var result=JSLINQ(three).Count(function(item){return item.x==two[i].x&&item.y==two[i].y;});if(result==0){var ball={x:100+two[i].x*20,y:100+two[i].y*20,r:8,vx:getRandomNumber(-250,250),vy:getRandomNumber(-150,150)};dropBall.push(ball);}}}
if(num===3){for(i in three){var result=JSLINQ(four).Count(function(item){return item.x==three[i].x&&item.y==three[i].y;});if(result==0){var ball={x:100+three[i].x*20,y:100+three[i].y*20,r:8,vx:getRandomNumber(-250,250),vy:getRandomNumber(-150,150)};dropBall.push(ball);}}}
if(num===4){for(i in four){var result=JSLINQ(five).Count(function(item){return item.x==four[i].x&&item.y==four[i].y;});if(result==0){var ball={x:100+four[i].x*20,y:100+four[i].y*20,r:8,vx:getRandomNumber(-250,250),vy:getRandomNumber(-150,150)};dropBall.push(ball);}}}
if(num===5){for(i in five){var result=JSLINQ(six).Count(function(item){return item.x==five[i].x&&item.y==five[i].y;});if(result==0){var ball={x:100+five[i].x*20,y:100+five[i].y*20,r:8,vx:getRandomNumber(-250,250),vy:getRandomNumber(-150,150)};dropBall.push(ball);}}}
if(num===6){for(i in six){var result=JSLINQ(seven).Count(function(item){return item.x==six[i].x&&item.y==six[i].y;});if(result==0){var ball={x:100+six[i].x*20,y:100+six[i].y*20,r:8,vx:getRandomNumber(-250,250),vy:getRandomNumber(-150,150)};dropBall.push(ball);}}}
if(num===7){for(i in seven){var result=JSLINQ(eight).Count(function(item){return item.x==seven[i].x&&item.y==seven[i].y;});if(result==0){var ball={x:100+seven[i].x*20,y:100+seven[i].y*20,r:8,vx:getRandomNumber(-250,250),vy:getRandomNumber(-150,150)};dropBall.push(ball);}}}
if(num===8){for(i in eight){var result=JSLINQ(nine).Count(function(item){return item.x==eight[i].x&&item.y==eight[i].y;});if(result==0){var ball={x:100+eight[i].x*20,y:100+eight[i].y*20,r:8,vx:getRandomNumber(-250,250),vy:getRandomNumber(-150,150)};dropBall.push(ball);}}}
if(num===9){for(i in nine){var result=JSLINQ(zero).Count(function(item){return item.x==nine[i].x&&item.y==nine[i].y;});if(result==0){var ball={x:100+nine[i].x*20,y:100+nine[i].y*20,r:8,vx:getRandomNumber(-250,250),vy:getRandomNumber(-150,150)};dropBall.push(ball);}}}}
function draw(num){switch(num){case 1:for(i in one){cxt.arc(100+one[i].x*20,100+one[i].y*20,8,0,Math.PI*2,true);cxt.closePath();}
break
case 2:for(i in two){cxt.arc(100+two[i].x*20,100+two[i].y*20,8,0,Math.PI*2,true);cxt.closePath();}
break
case 3:for(i in three){cxt.arc(100+three[i].x*20,100+three[i].y*20,8,0,Math.PI*2,true);cxt.closePath();}
break
case 4:for(i in four){cxt.arc(100+four[i].x*20,100+four[i].y*20,8,0,Math.PI*2,true);cxt.closePath();}
break
case 5:for(i in five){cxt.arc(100+five[i].x*20,100+five[i].y*20,8,0,Math.PI*2,true);cxt.closePath();}
break
case 6:for(i in six){cxt.arc(100+six[i].x*20,100+six[i].y*20,8,0,Math.PI*2,true);cxt.closePath();}
break
case 7:for(i in seven){cxt.arc(100+seven[i].x*20,100+seven[i].y*20,8,0,Math.PI*2,true);cxt.closePath();}
break
case 8:for(i in eight){cxt.arc(100+eight[i].x*20,100+eight[i].y*20,8,0,Math.PI*2,true);cxt.closePath();}
break
case 9:for(i in nine){cxt.arc(100+nine[i].x*20,100+nine[i].y*20,8,0,Math.PI*2,true);cxt.closePath();}
break
case 0:for(i in zero){cxt.arc(100+zero[i].x*20,100+zero[i].y*20,8,0,Math.PI*2,true);cxt.closePath();}
break
default:}}
var cyc=20;var count=0;var a=80;var t=0;var drawAsync=eval(Jscex.compile("async",function(){while(true){try{if(dropBall.length>100)dropBall.shift();cxt.clearRect(0,0,canvas.width,canvas.height);cxt.beginPath();draw(count%10);for(i in dropBall){cxt.arc(dropBall[i].x,dropBall[i].y,dropBall[i].r,0,Math.PI*2,true);cxt.closePath();dropBall[i].y+=dropBall[i].vy*cyc/1000;dropBall[i].x+=dropBall[i].vx*cyc/1000;if(dropBall[i].r+dropBall[i].y>canvas.height){dropBall[i].vy*=-0.7;dropBall[i].y=canvas.height-dropBall[i].r;}
dropBall[i].vy+=a;}
cxt.fill();t+=cyc;if(t>=1000){getBalls(count%10);t=0;count++;draw(count%10);}}
catch(e){alert(e)}
$await(Jscex.Async.sleep(cyc));}}))
drawAsync().start();</script>

JavaScript之canvas的更多相关文章

使用 JavaScript 和 canvas 做精确的像素碰撞检测
原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...
javascript的canvas绘图的基本用法
<canvas>是HTML里面非常强大的元素,利用它结合js可以实现很多动画效果,大大增强交互性.下面,我想用图文并茂的方式阐述一下canvas的绘图机制的基础内容,话不多说,先上代码: ...
使用javascript和canvas画月半弯
使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...
每天一个JavaScript实例-canvas绘图
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
JavaScript修改Canvas图片
用JavaScript修改Canvas图片的分辨率(DPI) 应用场景: 仓库每次发货需要打印标签, Canvas根据从数据库读取的产品信息可以生成标签JPG, 但是这个JPG图片的默认分辨率(D ...
html加javascript和canvas类似超级玛丽游戏
html加javascript和canvas制作代码来源于网上复制可用 <!doctype html><html lang="en"> <head ...
JavaScript+html5 canvas实现本地截图教程
这篇文章主要介绍了JavaScript+html5 canvas实现本地截图教程,对截图功能感兴趣的小伙伴们可以参考一下最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canva ...
初探Javascript之Canvas
什么是Canvas <canvas>是 HTML5 新增的元素,可使用JavaScript脚本来绘制图形. canvas是一个矩形区域,您可以控制其每一像素. 引入Canvas ```ht ...
使用JavaScript和Canvas打造真实的雨滴效果
使用JavaScript和Canvas打造真实的雨滴效果寸志 · 1 年前我最近搞了一个有趣的项目——rainyday.js .我认为这个项目并不怎么样,而且,事实上这是我第一次尝试接触一些比弹窗 ...

随机推荐

C# DataGridView中合并单元格
/// 合并GridView列中相同的行 /// /// GridView对象 /// 需要合并的列 public static void GroupRows(GridView GridView1, ...
git有merge时如何删除分支
不小心增加了一个分支,并且有了merge,如何删除掉? 具有merge时不能切换分支可以利用git stash命令 git rm controllers/InterfaceController.ph ...
(转)用AGG实现高质量图形输出（一）
AGG是一个开源.高效的跨平台2D图形库.AGG的功能与GDI+的功能非常类似,但提供了比GDI+更灵活的编程接口,其产生的图形的质量也非常高(自称超过GDI+) 使用前AGG的准备工作下载AGG库 ...
约瑟夫圆环的C++实现
转载请注明出处:点我昨天参加了企鹅的2015年实习生招聘的笔试,编程题第一道题就是约瑟夫圆环问题,要求用C++来实现. 约瑟夫圆环问题其实是一个很有名的问题:问题的描述为: 设有编号为1,2,……, ...
cocos2d-x 3.1.1 学习笔记［3］Action 动作
这些动画貌似都非常多的样子,就所有都创建一次. 代码例如以下: /* 动画*/ auto sp = Sprite::create("card_bg_big_26.jpg"); Si ...
opencv官网
http://wiki.opencv.org.cn/index.php/Template:Doc
Android游戏背景音乐音效音量控制
游戏音效就是我们在玩游戏时出现的音乐,这个也是每个游戏必备的一部分,但有是你做游戏的背景音乐有间断的感觉的话,我们可以用 getCurrentPosition()这个方法来判断一下声音播放的偏移.其实 ...
[golang学习] goroutine调度
这两天有些闲功夫, 学习下golang, 确实非常简洁. 不过有些缺憾. 在我的测试中. golang的调度(goroutine)似乎不是非常好. func say(k int) { fmt.Prin ...
LeetCode14 Longest Common Prefix
题意: Write a function to find the longest common prefix string amongst an array of strings. (Easy) 这两 ...
Japan
Japan plans to welcome the ACM ICPC World Finals and a lot of roads must be built for the venue. Jap ...

JavaScript之canvas

JavaScript之canvas的更多相关文章

随机推荐

热门专题