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 .我认为这个项目并不怎么样,而且,事实上这是我第一次尝试接触一些比弹窗 ...

随机推荐

查看系统和PowerShell版本
查询PowerShell当前版本$psversiontable.BuildVersion.Major 查询Windows当前版本:[System.Environment]::OSVersion.Ver ...
C#中的ICollection接口
一.集合类: 1.1 ICollection接口前面我们学习了数组,这是.net Framework定义的最基本的集合类型,除过数组外,.net Framework还另外定义了很多集合类型以满足编程 ...
phpexcel来做表格导出（多个工作sheet）
1.先得去下载phpexcel文档,加压下来 <?php /** * 简单实用Execl */ set_include_path('.'.get_include_path().PATH_SEPA ...
Beautyacticle
Original: https://github.com/rizhilee/Beautyacticle Backup: https://github.com/eltld/Beautyacticle
[CodeEdit--Sublime]一些好用的Plugins
Sublime Text 3 Plugins (**)packet control:plugin包管理器 (**)netuts-fetch: (**)markdown editing:Markdown ...
C语言中的各种修饰符
C允许同时使用多于一个的修饰符,这就使得可以创建一下各种类型: int board[8][8];//int数组的数组 int **ptr;//指向int的指针的指针 int *risk[10];//具 ...
MySQL ALTER语法的运用方法 && 操作索引和字段
语法:alter_specification: ADD [COLUMN] create_definition [FIRST | AFTER column_name ] or ADD INDEX [in ...
initrd映像文档的作用和制作
1.http://pan.baidu.com/s/1dDrGeKL 2.http://wenku.baidu.com/link?url=qPa_jfkEZCbERnwMYWLwm9EZJ_ebMRJA ...
Myeclipse2014添加mybatis generator插件
Myeclipse2014把mybatis generator插件直接放在dropins文件夹下,重启后不能成功安装mybatis插件. 既然离线安装不成功,可以选择在线安装 1.选择 Help-&g ...
String、Brush、Color 相互转换
1.String转换成Color Color color = (Color)ColorConverter.ConvertFromString(string); 2.String转换成Brush Bru ...

JavaScript之canvas

JavaScript之canvas的更多相关文章

随机推荐

热门专题