正文
html5小球,html5小球转圈
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
html5的绘图会闪烁，怎么解决
业内经常使用这种技术：
创建一个新的canvas对象，用这个canvas绘制你的小球，这个canvas当作缓存用的canvas。然后再用你的canvas绘制这个canvas，而不是直接绘制图片，这样效率很高。这种技术叫做双缓存。
如何用Html5中的canvas模拟三维小球运动动画
下面详细解释都在源码中:
!doctype htmlhtmlheadmeta charset="utf-8"title无标题文档/titlestyle#canvas{ background:#eee;}/style/headbodycanvas id='canvas' width="500" height='500'/canvasscriptwindow.onload=function(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); //平移,主要是将坐标轴平移到中间,为了画圆定位方便 context.translate(250,250); //定义焦距 var fos = 300; //存放小球的数组 var arr = []; for(var i = 0 ; i 8 ; i++){ var arcObj = { //半径,用随机数目的是让每个小球大小不一 r:10+5*Math.random(), //起始X坐标 x:-200+i*30, //起始Y坐标 y:-100+200*Math.random(), //起始Z坐标,这里需要理解,我们要构造的是一个三维立体小球的运动 //则X,Y轴不能表达空间感,你需要充分的想象Z坐标轴是顺着你的眼睛的就是Z轴 z:i*10, //小球的运行速度 speed:20 } arr.push(arcObj); } setInterval(function(){ //清除画布,每次画之前先将上次的清除掉.然后绘出本次的,就可以形成动画效果. context.clearRect(-250,-250,500,500); //将arr排序,sort()的参数则是作为一种比较规则 var newArr = arr.sort(function (a,b){ return a.z b.z }); //循环绘出刚才定义的几个小球 for(var i = 0 ; i newArr.length ; i++){ //z轴的变化,每次变化都是 速度*时间+z = z;由于speed未定义单位,则时间可忽略 arr[i].z += arr[i].speed; //让小球来回弹跳 if(arr[i].z 600 || arr[i].z -50){ arr[i].speed *= -1; } //这里的缩放比例,一定要注意,你要想象你眼前有个球垂直从远处飞来,逐渐变大的过程,Z轴不断增加.焦距就想象成从最初你到球的距离,通过运动后,现在到球的距离和焦距就可以形成缩放比例. var scales = fos/(fos+arr[i].z); var x1 = arr[i].x*scales; var y1 = arr[i].y*scales; //保存之前的context绘图环境,即后续可以用context.restore方法可以恢复, //目的是让下面的context变化不影响其他的画图样式. context.save(); //平移X,Y 也可以不用平移X,Y只要在下面的画圆中定义相应的X,Y也能达到相同的目的 context.translate(x1,y1); //将坐标轴缩放,目的是让小球的大小发生视觉上的变化. context.scale(scales,scales); context.beginPath(); //定义放射性颜色渐变 var colorObj = context.createRadialGradient(0,0,0,0,0,arr[i].r); colorObj.addColorStop(0,'#cbc0f3'); colorObj.addColorStop(1,'#06198b'); context.fillStyle=colorObj; context.arc(0,0,arr[i].r,0,Math.PI*2); context.fill(); context.restore(); } },50);}/script/body/html
主要要理解焦距的概念,实际开发过程中,可能X轴,Y轴都有小球的运动速度分量,那才能在运动的过程中转弯,撞墙等特效.
有没有哪位在兄弟连培训过html5前端开发，请问html5培训的课程大纲可以分享一下么
以下是课程大纲，可以参考一下
(1)HTML5+CSS3
经典表格布局制作简历
1. HTML5介绍 2. HTML5发展史 3. HTML5简介 4. HTTP协议介绍 5. HTTP消息类型 6. 互联网发展形式 7. web开发所需要的构件
8. 编辑器的使用 9. HTML基本语法与规范(标签元素、属性) 10. 第一个HTML网页 11.表格标签
规范代码盒模型布局小米等网站
1. 文档头和编码声明 2. 基础标签 3. 文本类标签 4. 列表标签 5. 语义化标签的使用 6. 字符实体 7. 表格标签 8. HTML5标签的兼容处理9. HTML5标签SEO的作用 10. HTML5表单新特性 11. 多媒体标签
3D旋转+动画制作正方体
1. CSS的定义 2. CSS引入 3. CSS选择器 4. CSS3与CSS2的区别 5. 长度单位 6. 颜色单位 7. 常用属性 8. CSS属性
流行的pc端，App页面响应式布局
1. W3C盒子模型 2. Div+CSS网页布局 3. 弹性盒子 4. HTML5兼容处理 5. 使用HTML5布局元素的布局 6. Media Query响应式布局 7. 百分比网页布局
工作要求，实战大型电商网站静态页面
1. PS切图 2. 精灵图 3. CSS重制样式表Reset CSS、 Normalize.css 4. CSS命名规范，CSS常用名
(2)JavaScript jQuery实例 实战项目
前端核心语言javascript语法
1. JavaScript简介 2. 在页面中使用JavaScript 3. JavaScript的语法 a) 变量声明规范 b)语句结束 c)脚本注释 d)代码块 e)数据类型 f)类型转换 g)运算符 h)流程控制语句 i)函数 j)内置对象
原生Js功能开发
1. 更换页面皮肤 2. 五彩小球 3. 随机点名器 4. 轮播图 5. 网站时间显示 6. 商城抢购活动 7. 购物车的全选、反选、全不选 8. 选项卡前端后台交互功能开发9. 进度条 10. 拖拽div 11. 放大镜 12. 城市地址二级、三级联动 13. 随机浮动广告 14. 无缝连接 15. 仿百度登录
Jquery库交互特效开发
1. JQuery简介 2. JQuery安装 3. JQuery CSS操作 4. JQuery选择器 5. JQuery筛选 6. JQuery html 文档处理 7. JQuery事件 8. JQuery效果 9. JQuery Ajax 10. JQuery其他操作 11. JQuery插件
实战进阶-瞄准市场
1.PS切图 2.CSS重置样式表 3.网页规范 4.兼容性 5.SASS 6.Compass精灵图 7.代码压缩 8.常见网站效果 9.rem相对大小布局
(3)Node.JS MongoDB Express Vue.js
Vue.js前端热组件化开发框架
1. 介绍 2. 安装 3. 模板/数据绑定 4. Class/Style绑定 5. 事件 6. 组件 7. 混合 8. 插件 9. 服务/路由
后端Js-Node.js搭建前端脚手架
1. Node.js简介 2. Node.js安装 3. NPM工具使用 4. 模块、Package 5. 回调函数 6. Buffer，事件 7. 文件处理模块 8. Http，URL，Querystring Path等模块 9. POST/GET请求 10. 安装模板引擎
Mongodb数据库操作
1. NoSQL基础概念 2. MongoDB 简介 3. 数据库、集合、文档概念 4. 数据库操作 5. 集合操作 6. 文档CURD操作 7. 条件操作符 8. Limit与Skip方法 9. 排序 10. Node.Js的mongoose模块 操作MongoDB
基于node.js搭建express服务器
1. Express 简介 2. 安装 Express 3. 路由 4. 中间件 5. 视图 6. 模板引擎 7. AJAX 8. 跨域/JSONP 9. 搜索分页 10. 文件上传 11. 登陆注册
实战-大型单页应用
1. Web Socket 2. SSE 3. 网络爬虫(实现多人聊天时，服务器主动推送消息) 4. 常用工具使用Webpack 5. 压缩混淆 6. AMD/CMD规范 7. 结合Vue.JS实现单页面应用 8. Web APP 打包
(4)HTML5新特性 微信开发 微信小程序 学生项目
HTML5新特性
1. 音/视频 API 2. 本地存储LocalStorage/SessionStorage 3. Geolocation(地理定位) 4. 百度地图API 5.浏览器多线程Web Workers 6. 应用程序缓存 (Application Cache) 7. Canvas 画图、SVG 8. 拖拽事件、API 9. FileReader API 10. PAJAX 11. Bootstrap 12.插件：Swiper、图表、Iconfont
微信公众号开发
1. 接入微信公众平台 2. 账号申请 3. 微信JSSDK使用 4. 分享接口 5. 图像接口 6. 音频接口 7. 智能接口 8. 设备信息 9. 地理位置微信小程序开发10. 界面操作 11. WEUI框架 12. 微信小程序开发 13. 创建项目 14. 工具 15. 框架 16. WXML 、 WXSS 17. 组件 18. API
实战--团队协作工具
1. Git协作 2. 前端项目规范化 3. H5新特性 4. 即时通讯 5. 互联网服务接口调用
HTML5中canvas创建多个小球自由落体并且反弹,小球有各自轨迹,互相不干扰。
如果是固定轨迹的话，是需要将所有的坐标都push到数组里，
如果不是固定的，只是希望互不影响，你可以用随机数做。
怎么用html5制作简单的大球吃小球的游戏
html
head
title
大球吃小球by大奔
/title
script type="text/javascript" src="src/jscex.js"/script
script type="text/javascript" src="src/jscex-parser.js"/script
script type="text/javascript" src="src/jscex-jit.js"/script
script type="text/javascript" src="src/jscex-builderbase.js"/script
script type="text/javascript" src="src/jscex-async.js"/script
script type="text/javascript" src="src/jscex-async-powerpack.js"/script
/head
body
canvas id="myCanvas" width="480" height="300" style="border:1px solid #c3c3c3"
你的浏览器改换了
/canvas
script type="text/javascript"
var d=document.getElementByIdx_x("myCanvas");
var cxt=d.getContext("2d");
var balls=[];
//这里为了获得随机数的向量
function getRandom(a,b){
return (a+Math.floor(Math.random()*(b-a+1)))
}
//这里对向量进行赋值
var Vector2=function(a,b){
this.x=a||0;
this.y=b||0;
};
//这里需要注意，对象的默认方法在这里写不会管用。例如sub
Vector2.prototype={//写对象的构造函数
constructor:Vector2,
multiplyScalar:function(s){
this.x*=s;
this.y*=s;
return this;
},
divideScalar:function(s){
if(s){
this.x/=s;
this.y/=s;
}else{
this.set(0,0);
}
return this;
},
dot:function(v){
return this.x*v.x+this.y*v.y;//即两个向量相乘
},
lengthSq:function(){
return this.x*this.x+this.y*this.y;
},
length:function(){
return Math.sqrt(this.lengthSq());
},
normalize:function(){
//这里得到的是单位向量，按照google的定义，单位的向量是， //（a,b）则a*a+b*b=1;
return this.divideScalar(this.length());
},
reflectionSelf:function(v){
//这里得到的是反射向量。公式参考这个网址。
//blog.physwf.com/?p=42
var nv=v.normalize();
this.sub(nv.multiplyScalar(2*this.dot(nv)));
},
distanceToSquared:function(v){//求出两点之间的距离
var dx=this.x-v.x,
dy=this.y-v.y;
return dx*dx+dy*dy;
}
};
Vector2.sub=function(v1,v2){//这里重写sub方法
return new Vector2(v1.x-v2.x,v1.y-v2.y);
};
for(var i=0;i40;i++){//初始化40个小球
var ball={
position:new Vector2(getRandom(20,600),getRandom(20,600)),
r:getRandom(6,20),
speed:new Vector2(getRandom(-200,200),getRandom(-200,200)),
mass:1,//这是小球的质量
restitution:1//这是弹性系数
};
balls.push(ball);
}
var filterBalls=[];
for(var i=0;iballs.length;i++){
var overlapCount=0;
for(var j=i+1;jballs.length;j++){//两个两个比较防止重复，而且初始化的位置不能重 //叠，否则符合碰撞的条件。去掉这个判断以后，效果不太显著，可以多放些球试试。
var distance=balls[i].position.distanceToSquared(balls[j].position);
var l=balls[i].r+balls[j].r;
if(distance=(l*l)){
overlapCount++;
}
}
if(overlapCount===0){
filterBalls.push(balls[i]);
}
}
balls=filterBalls;//这里可以去掉试试。
cxt.fillStyle="#030303";
cxt.fillRect(0,0,d.width,d.height);
function init(){
cxt.fillStyle="#fff";
for(i in balls){
cxt.beginPath();
cxt.arc(balls[i].position.x,balls[i].position.y,balls[i].r,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
}
}
init();
var cyc=20;
var moveAsync2=eval_r(Jscex.compile("async",function(){
var tag=0;
while(true){
try{
cxt.fillStyle="rgba(0,0,0,3)";
cxt.fillRect(0,0,d.width,d.height);
cxt.fillStyle="#fff";
for(var i=0;iballs.length;i++){
//这里是为了两个小球比较会重复所以，每次比较都是i与i+1 //开始相比较
for(var j=i+1;jballs.length;j++){
collisionSolver(balls[i],balls[j]);
}
}
for(i in balls){
cxt.beginPath();
cxt.arc(balls[i].position.x,balls[i].position.y,balls[i].r,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
if(balls[i].r+balls[i].position.xd.width){
//如果小球x轴跑出了画布的范围
balls[i].position.x=d.width-balls[i].r;
//小球的位置返回到画布的边缘位置
balls[i].speed.x*=-1;
//同时x轴的方向变为反方向
}if(balls[i].position.xballs[i].r){
//如果小球的x坐标小于小球的半径。肯定画不成完整的圆了，所以要归位
balls[i].position.x=balls[i].r;
balls[i].speed.x*=-1; }if(balls[i].r+balls[i].position.yd.height){//同理y轴
balls[i].position.y=d.height-balls[i].r;
balls[i].speed.y*=-1;
}
if(balls[i].position.yballs[i].r){
balls[i].position.y=balls[i].r;
balls[i].speed.y*=-1;
} balls[i].position.x+=balls[i].speed.x*cyc/1000;
//小球的x轴不断按照速度增大
balls[i].position.y+=balls[i].speed.y*cyc/1000;
}
}catch(e){
alert(e);
}
$await(Jscex.Async.sleep(cyc));
}
}));
function collisionSolver(bodyA,bodyB){//判断小球发生碰撞的时候的变化。
var vB=bodyB.speed;
var vA=bodyA.speed;
var l=bodyA.r+bodyB.r;
var distSqr=bodyA.position.distanceToSquared(bodyB.position);
var isTouching=distSqr=l*l? true:false;
//判断两圆心之间的距离如果小于两半径之和的平方。则为true
var normal=Vector2.sub(bodyB.position,bodyA.position).normalize();
//请看上面的解释,所以得到的是B相对于A的单位向量。
var ratio=bodyA.r/l;//这是一个比例
var contactPoint=new Vector2();
//根据平行线切割的三角形，两边的边的比例相等，
contactPoint.x=bodyA.position.x+(bodyB.position.x-bodyA.position.x)*ratio;
contactPoint.y=bodyA.position.y+(bodyB.position.y-bodyA.position.y)*ratio;
var rA=Vector2.sub(contactPoint,bodyA.position);
//这两个地方没有找到是哪里用到的？？？？？
var rB=Vector2.sub(contactPoint,bodyB.position);
var vrn=Vector2.sub(vA,vB).dot(normal);
//这里得到的是Va相对于vB的速度向量与两球的圆心的单位向量相乘。
///a*b=|a|*|b|*cos@.所以如果vrn大于零，则夹角小于90度。
if(isTouchingvrn0){
//这里是冲量公式的一个部分
var normalMass=1/(1/bodyA.mass+1/bodyB.mass);
var restitution=(bodyA.restitution+bodyB.restitution)/2;
var normalImpulse=-normalMass*vrn*(1+restitution);
bodyA.speed.x+=normalImpulse*normal.x/bodyA.mass;
//这里总之是一个大球一个小球，所以速度一个增大一个减小
bodyA.speed.y+=normalImpulse*normal.y/bodyA.mass;
bodyB.speed.x-=normalImpulse*normal.x/bodyB.mass;
bodyB.speed.y-=normalImpulse*normal.y/bodyB.mass;
}
}
moveAsync2().start();
/script
/body
/html
在html5中那几个参数控制并实现小球自动回弹?
问得什么鬼，就好像我在你身边看得见你在干什么一样。问问题的时候就不能好好描述一下吗？
首先参数是用来传递数据的，你这样问说明你是已经有写了函数（方法）来控制小球，这样你就可以去找到这个函数来测试。
嗯嗯，我都不知道我在说什么。。。
