给你个思路。具体要自己写。
让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：申请域名、网页空间、营销软件、网站建设、广河网站维护、网站推广。
球的中心点知道，半径知道，那么表面所有点的xyz坐标能得出。高亮你行进路线上的点。
操场轨迹上下两边为直线，左右为半圆。
选择用纯css分成四段控制动画，最终效果如图：
详细分析：
创建HTML：
HTML非常简单，2个div嵌套，里面的point就是点，调整外面的layout的top，left和rotate做出动画效果。
div class="layout"
div class="point"/div
/div
核心css：
去掉了浏览器兼容用的代码。
把动画分成四个部分：上方直线-右边半圆-下方直线-左边半圆。
最巧妙的地方在于，layout其实是一个长方型，把点放在长方型的一头，通过旋转layout使点旋转，去掉代码中注释的红色背景就能看到如下效果：
.layout{
width:10px;
height:150px;
position:relative;
margin-left:100px;
margin-top:50px;
/*background:red;*/
animation-name:rotate;
animation-duration:2s;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
animation-direction:normal;
}
@-webkit-keyframes rotate{
0% { left:0px; top:0px;
transform:rotate(0deg);
}
25% { left:150px; top:0px;
transform:rotate(0deg);
}
50% { left:150px; top:50px;
transform:rotate(180deg);
}
75% { left:0px; top:50px;
transform:rotate(180deg);
}
100%{ left:0px; top:0px;
transform:rotate(360deg);
}
}
完整代码:
html
head
style
.point{
width:10px;
height:10px;
background:blue;
position:relative;
border-radius:5px;
margin:0 auto;
}
.layout{
width:10px;
height:150px;
position:relative;
margin-left:100px;
margin-top:50px;
/*background:red;*/
animation-name:rotate;
animation-duration:2s;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
animation-direction:normal;
/* Chrome: */
-webkit-animation-name:rotate;
-webkit-animation-duration:2s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-webkit-animation-play-state:running;
-webkit-animation-direction:normal;
/* Firefox: */
-moz-animation-name:rotate;
-moz-animation-duration:2s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
-moz-animation-direction:normal;
/* Opera: */
-o-animation-name:rotate;
-o-animation-duration:2s;
-o-animation-timing-function:linear;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;
-o-animation-direction:normal;
}
@-webkit-keyframes rotate{
0% { left:0px; top:0px;
transform:rotate(0deg);
-ms-transform:rotate(0deg); /* IE 9 */
-moz-transform:rotate(0deg); /* Firefox */
-webkit-transform:rotate(0deg); /* Chrome */
-o-transform:rotate(0deg); /* Opera */
}
25% { left:150px; top:0px;
transform:rotate(0deg);
-ms-transform:rotate(0deg); /* IE 9 */
-moz-transform:rotate(0deg); /* Firefox */
-webkit-transform:rotate(0deg); /* Chrome */
-o-transform:rotate(0deg); /* Opera */
}
50% { left:150px; top:50px;
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Chrome */
-o-transform:rotate(180deg); /* Opera */
}
75% { left:0px; top:50px;
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Chrome */
-o-transform:rotate(180deg); /* Opera */
}
100%{ left:0px; top:0px;
transform:rotate(360deg);
-ms-transform:rotate(360deg); /* IE 9 */
-moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Chrome */
-o-transform:rotate(360deg); /* Opera */
}
}
/style
/head
body
div class="layout"
div class="point"/div
/div
/body
/html
这是面向对象的概念。
一个类要实列化成对象，需要用new来创建，也就是给这个对象提供数据区域。类只是个抽象部分，它需要实体化后才可以被运用。
1、创建Canvas画板
HTML5内声明一个Canvas画板很简单，只需要这样在HTML页面内加入一个canvas标签即可，需要定义其大小和id
view sourceprint?
1.canvas id="myCanvas" width="400" height="400"
2.对不起，你的浏览器不支持Canvas标签！
3./canvas
2、实现方案整理
要实现这样一个球在固定盒子内随机移动我们需要做到以下几点：
1）、画板大小固定；
2）、球大小固定且圆心位置随机；
3）、需要考虑球不出边界；
4）、通过setInterval(function(){},speed)方法实现时间间隔通过清空面板和重画模拟球的移动。
3、通过JavaScript操作画板
1）、初始化变量
view sourceprint?
1.//x和y为球的圆心坐标
2.//speed:表示球移动的速度 单位为毫秒
3.//radius:为球的半径
4.//width和height为盒子大小
5.var w, x,y, speed = 500, radius = 50, width = 400, height = 400;
2）、页面初始化绘制画板且设定时间间隔
view sourceprint?
01.//初始化
02.function init() {
03.drawCanvas();
04.setInterval(moveWheel, speed);
05.}
06.
07.//画盒子
08.function drawCanvas() {
09.//创建Canvas对象
10.var c = document.getElementById("myCanvas");
11.var ctx = c.getContext("2d");
12.//在画布面板上面创建一个矩形
13.ctx.fillStyle = "#000000"; //设置填充颜色值
14.ctx.fillRect(0, 0, width, height);
15.ctx.fill();
16.
17.w = ctx;
18.}
3）、随机移动球的实现
view sourceprint?
01.//随机移动球
02.function moveWheel() {
03.clearCanvas();
04.drawCanvas();
05.
06.//获得随机坐标
07.x = getRandomNum();
08.y = getRandomNum();
09.
10.//在画布上渲染一个圆形
11.w.fillStyle = '#FFFFFF';
12.w.beginPath();
13.w.arc(x, y, radius, 0, Math.PI * 2, true);
14.w.closePath();
15.w.fill();
16.}
4）、获取随机坐标数据
view sourceprint?
1.//获取随机数
2.function getRandomNum() {
3.return Math.random() * (width - radius * 2) + radius;
4.}
5）、清除画布
view sourceprint?
1.//清除画布
2.function clearCanvas() {
3.if (typeof w != "undefined") {
4.w.clearRect(0, 0, width, height);
5.}
6.}
完整示例代码如下所示：
view sourceprint?
01.!doctype html
02.html
03.head
04.titleHTML5标签Canvas画布练习轮子滚动/title
05.meta charset="UTF-8" /
06./head
07.body onload="init();"
08.h1Canvas 标签实现一个球限定在盒子内随机移动效果/h1
09.canvas id="myCanvas" width="400" height="400"
10.对不起，你的浏览器不支持Canvas标签！
11./canvas
12.script type="text/javascript" language="javascript"
13.//x和y为球的圆心坐标
14.//speed:表示球移动的速度 单位为毫秒
15.//radius:为球的半径
16.//width和height为盒子大小
17.var w, x,y, speed = 500, radius = 50, width = 400, height = 400;
18.
19.//初始化
20.function init() {
21.drawCanvas();
22.setInterval(moveWheel, speed);
23.}
24.
25.//画盒子
26.function drawCanvas() {
27.//创建Canvas对象
28.var c = document.getElementById("myCanvas");
29.var ctx = c.getContext("2d");
30.//在画布面板上面创建一个矩形
31.ctx.fillStyle = "#000000"; //设置填充颜色值
32.ctx.fillRect(0, 0, width, height);
33.ctx.fill();
34.
35.w = ctx;
36.}
37.
38.//随机移动球
39.function moveWheel() {
40.clearCanvas();
41.drawCanvas();
42.
43.//获得随机坐标
44.x = getRandomNum();
45.y = getRandomNum();
46.
47.//在画布上渲染一个圆形
48.w.fillStyle = '#FFFFFF';
49.w.beginPath();
50.w.arc(x, y, radius, 0, Math.PI * 2, true);
51.w.closePath();
52.w.fill();
53.}
54.
55.//清除画布
56.function clearCanvas() {
57.if (typeof w != "undefined") {
58.w.clearRect(0, 0, width, height);
59.}
60.}
61.
62.//获取随机数
63.function getRandomNum() {
64.return Math.random() * (width - radius * 2) + radius;
65.}
66./script
67./body
68./html
过多的代码解释这里就不罗嗦了，核心代码段均有注释，实在有什么不明白的地方随时留言。
这篇主要记录WebGL的一些基本要点，顺便也学习下如何使用FBO与环境贴图。先看下效果图(需要支持WebGL，Chrome,火狐，IE11)。
主要实现过程如下，先用FBO输出当前环境在立方体纹理中，再画出当前立方体，最后画球，并且把FBO关联的纹理贴在这个球面上。
开始WebGL时，最好有些OpenGL基础，在前面讲Obj完善与MD2时，大家可能已经发现了，因为着色器的添加使用，原来一些Opengl大部分API已经没有使用。WebGL就和这差不多，大部分功能是着色器完成主要功能，记录下主要过程，大家可以比较下前面的，看看是不是很像，为了熟悉WebGL基本功能，本文没有利用比较完善的框架，只是用到一个帮助计算矩阵的框架(gl-matrix.js).
和使用OpenGL一样，我们要初始化使用环境，提取一些全局使用量。相关代码如下：
初始化：
var gl;//WebGLRenderingContext var cubeVBO;//Cube buffer ID var sphereVBO;//球体VBO var sphereEBO;//球体EBO var cubeTexID;//立方体纹理ID var fboBuffer;//桢缓存对象 var glCubeProgram;//立方体着色器应用 var glSphereProgram;//球体着色器应用 var fboWidth = 512;//桢缓存绑定纹理宽度 var fboHeight = 512;//桢缓存绑定纹理高度 var targets;//立方体贴图六个方向 var pMatrix = mat4.create();//透视矩阵 var vMatrix = mat4.create();//视图矩阵 var eyePos = vec3.fromValues(0.0, 1.0, 0.0);//眼睛位置 var eyeLookat = vec3.fromValues(0.0, -0.0, 0.0);//眼睛方向 var spherePos = vec3.fromValues(0.0, -0.0, 0.0);//球体位置 var canvanName; function webGLStart(cName) { canvanName = cName; InitWebGL(); InitCubeShader(); InitSphereShader(); InitCubeBuffer(); InitSphereBuffer(); InitFBOCube(); //RenderFBO(); gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.enable(gl.DEPTH_TEST); tick(); } function InitWebGL() { //var canvas = document.getElementById(canvanName); InitGL(canvanName); } function InitGL(canvas) { try { //WebGLRenderingContext gl = canvas.getContext("experimental-webgl"); gl.viewportWidth = canvas.width; gl.viewportHeight = canvas.height; targets = [gl.TEXTURE_CUBE_MAP_POSITIVE_X, gl.TEXTURE_CUBE_MAP_NEGATIVE_X, gl.TEXTURE_CUBE_MAP_POSITIVE_Y, gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, gl.TEXTURE_CUBE_MAP_POSITIVE_Z, gl.TEXTURE_CUBE_MAP_NEGATIVE_Z]; } catch (e) { } if (!gl) { alert("你的浏览器不支持WebGL"); } }
在这里，我们初始化在网页中WebGL的上下方环境，并给出一系列初始化过程。下面先给出房间，也就是其中立方体的相关代
