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

随机推荐

HttpWebRequest post请求获取webservice void数据信息
private void button2_Click(object sender, EventArgs e) { Hashtable ht = new Hashtable(); ht["sc ...
OSG 实现跟随节点的相机(转)
本章教程将继续使用回调和节点路径(NodePath)来检索节点的世界坐标. 本章目标: 在一个典型的仿真过程中,用户可能需要从场景中的各种车辆和人物里选择一个进行跟随.本章将介绍一种将摄像机“依附 ...
我的git使用记录
git的教程现在琳琅满目,需要学习的东西也有很多,一下子接受不了那么多的东西,所以打算记录在实用的过程中常用的操作和遇到的问题. 基本操作 git init git add . git add -A ...
javascript之处理Ajax错误
使用Ajax须留心两类错误.它们的差别源于视角的不同. 第一类错误是从XMLHttpRequest对象的角度看到的问题:某些因素阻止了请求发送到server,比如DNS无法解析主机名,连接请求被拒绝. ...
android activity 跳转传值问题研究
intent = new Intent(); intent.setClass(LoginActivity.this, RegActivity.class); startActivity(intent) ...
jQuery 属性操作 - addClass() 方法
使用 addClass() 和 removeClass() 来移除 class,并添加新的 class. <html> <head> <script type=" ...
Cocos2d-html5 笔记4: 粒子
今天看了cocos2d-html5里面的粒子系统相关的代码,首先看了代码中引用的两篇文章, 这两篇文章google上都可以搜到pdf的. The Ocean Spray in Your Face [j ...
archlinux下wifi-menu显示连接超时
/etc/network.d/wlan0 增加: DHCP_TIMEOUT=30
关于apache的重启
一:Apache重起的最好方法apachectl graceful http://blog.csdn.net/qianling3439/article/details/8622618 二:请问apac ...
Linux中命令链接操作符的十个最佳实例
转载: http://www.linuxeden.com/html/softuse/20140112/147406.html http://www.tecmint.com/chaining-opera ...

JavaScript之canvas

JavaScript之canvas的更多相关文章

随机推荐

热门专题