├── README.md ├── .DS_Store ├── 速度与加速度 ├── angular-acceleration.html ├── sumary5.md ├── velocity -axis.html ├── velocity-extend.html ├── Angular-velocity.html ├── gravity-as-accerlation.html ├── acceleration.html ├── mouse-floow.html └── acceleration-2.html ├── 音频解析+环形音频可视化 ├── setCanvas.js ├── lineCircle.js └── analyser.js ├── 碰撞检测 ├── chapter9.md ├── ray-hit-test.js ├── distance-2.html ├── distance-1.html ├── point-hit-test.html ├── object-hit-test.html ├── multi-object-hit.html ├── boxes.html └── spring-collision-1.html ├── .gitattributes ├── share └── liquild │ ├── js │ └── vertex.js │ └── index.html ├── js ├── arrow.js ├── rule.js ├── box.js ├── spaceship.js ├── ball3d.js ├── ball.js ├── ball3d-s.js ├── binaryTree.js ├── tree.js ├── point3d.js ├── segment.js ├── Line.js ├── slider.js ├── rule2.js └── natureTree.js ├── 坐标旋转与角度反弹 ├── 简单的坐标旋转.html ├── 多物体旋转.html ├── 角度反弹优化.html ├── 角度反弹.html ├── 角度反弹-鼠标旋转线段.html ├── 角度反弹-鼠标旋转线段-hit-text.html └── 高级坐标旋转.html ├── 缓动与弹性动画 ├── easing-1.html ├── spring-1.html ├── spring-3.html ├── easing-to-mouse.html ├── Chapter8.md ├── easing-off.html ├── spring2.html ├── spring-line.html ├── easing-2.html ├── offset-spring.html ├── chain.html └── multi-spring.html ├── 三角函数与动画 ├── circles-and-ellipses.html ├── plusing-motion.html ├── smooth-circle-motion.html ├── wave-with-two-angles.html ├── circular-movement.html ├── rotate-to-mouse.html ├── linear-vertical-motion.html ├── 第三章总结.md ├── mouse-distance.html ├── distance-between-two-points.html └── waves-with-drawing-api.html ├── 边界与摩擦力 ├── friction(摩擦力)_2.html ├── friction(摩擦力)_1.html ├── bouncing1.html ├── bouncing2.html ├── refenerating-object.html ├── boundaries_remove.html └── ship-friction.html ├── 移动物体 ├── mouse-event.html ├── touch-event.html ├── 物体拖动.html ├── 物体拖动2.html └── rule.html ├── 弹幕 ├── atom.js └── index.html ├── 3D动画 ├── perspective-1.html ├── easing.html ├── trees-1.html ├── spring.html ├── gravity.html ├── velocity-3d.html ├── rotate.html ├── bouncing-3d.html ├── multiple-bouncing.html ├── trees-2.html ├── collision.html └── z-sort.html ├── 桌球运动 ├── billiard-opt.html └── billiard.html ├── 每周一点canvas动画 ├── canvas百分比加载.html └── martrix.html ├── 3D物体 └── lines-3d-2.html ├── 万有引力 ├── gravity.html ├── node-garden.html ├── node-garden-line.html └── node-garden-mass.html └── 众筹射击小游戏 └── plane.html /README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/supperjet/H5-Animation/HEAD/.DS_Store -------------------------------------------------------------------------------- /速度与加速度/angular-acceleration.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /音频解析+环形音频可视化/setCanvas.js: -------------------------------------------------------------------------------- 1 | function setCanvas(canvas, ctx, dpr, obj, bgColor) { 2 | var size = dpr || 1; 3 | canvas.width = (obj.w || 300) * dpr; 4 | canvas.height = (obj.h || 150) * dpr; 5 | canvas.style.width = (obj.w || 300)+ 'px'; 6 | canvas.style.height = (obj.h || 150) + 'px'; 7 | canvas.style.background = bgColor || '#000'; 8 | ctx.scale(size, size); 9 | } -------------------------------------------------------------------------------- /碰撞检测/chapter9.md: -------------------------------------------------------------------------------- 1 | ###本章重要公式 2 | ####1.基于距离的碰撞检测 3 | ``` 4 | var dx = objectB.x - objectA.x, 5 | dy = objectB.y - objectA.y; 6 | var distance = Math.sqrt(dx*dx + dy*dy); 7 | if(distance < objectA.radius + objectB.radius){ 8 | //handle collision 9 | } 10 | 11 | ``` 12 | ####2.多物体碰撞检测 13 | objects.forEach(function(objectA, i){ 14 | for(var j=i+1; i 0) { 32 | context.stroke(); 33 | } 34 | context.restore(); 35 | }; -------------------------------------------------------------------------------- /js/spaceship.js: -------------------------------------------------------------------------------- 1 | function SpaceShip(){ 2 | this.x = 0; 3 | this.y = 0; 4 | this.width = 25; 5 | this.height = 25; 6 | this.rotation = 0; 7 | this.showFlame = false; 8 | } 9 | 10 | SpaceShip.prototype.draw = function(context){ 11 | 12 | context.save(); 13 | context.beginPath(); 14 | context.translate(this.x, this.y); 15 | context.rotate(this.rotation); 16 | context.strokeStyle = "#ffffff"; 17 | context.moveTo(10, 0); 18 | context.lineTo(-10, 10); 19 | context.lineTo(-5, 0); 20 | context.lineTo(-10, -10); 21 | context.lineTo(10, 0); 22 | context.closePath(); 23 | context.stroke(); 24 | if(this.showFlame == true){ 25 | context.save() 26 | context.beginPath(); 27 | context.strokeStyle = "#f69"; 28 | context.moveTo(-7.5, -5); 29 | context.lineTo(-15, 0); 30 | context.lineTo(-7.5, 5); 31 | context.stroke(); 32 | context.restore(); 33 | } 34 | context.restore(); 35 | 36 | } -------------------------------------------------------------------------------- /js/ball3d.js: -------------------------------------------------------------------------------- 1 | function Ball3d(radius,color){ 2 | if(radius === undefined) {radius = 40;} 3 | if(color === undefined){color = '#00ff00';} 4 | this.x = 0; 5 | this.y = 0; 6 | this.xpos = 0; 7 | this.ypos = 0; 8 | this.zpos = 0; 9 | this.vz = 0; 10 | this.vx = 0; 11 | this.vy = 0; 12 | this.radius = radius; 13 | this.rotation = 0; 14 | this.mass = 1; 15 | this.scaleX = 1; 16 | this.scaleY = 1; 17 | this.name = ""; 18 | this.color = utils.parseColor(color); 19 | this.lineWidth = 1; 20 | this.visible = true; 21 | 22 | } 23 | 24 | Ball3d.prototype.draw = function(context){ 25 | context.save(); 26 | context.translate(this.x,this.y); 27 | context.rotate(this.rotation); 28 | context.scale(this.scaleX,this.scaleY); 29 | context.lineWidth = this.lineWidth; 30 | context.fillStyle = this.color; 31 | context.strokeStyle = this.color; 32 | context.beginPath(); 33 | context.arc(0,0,this.radius,0,Math.PI*2,false); 34 | context.closePath(); 35 | context.fill(); 36 | context.stroke(); 37 | context.restore(); 38 | } 39 | -------------------------------------------------------------------------------- /坐标旋转与角度反弹/简单的坐标旋转.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | 11 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /缓动与弹性动画/easing-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | easing 5 | 6 | 7 | 8 | your browser not support canvas! 9 | 10 | 11 | 12 | 13 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /缓动与弹性动画/spring-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 弹簧 6 | 7 | 8 | 9 | your browser not support canvas! 10 | 11 | 12 | 13 | 14 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /js/ball.js: -------------------------------------------------------------------------------- 1 | function Ball(radius,color){ 2 | if(radius === undefined) {radius = 40;} 3 | if(color === undefined){color = '#00ff00';} 4 | this.x = 0; 5 | this.y = 0; 6 | this.vx = 0; 7 | this.vy = 0; 8 | this.radius = radius; 9 | this.rotation = 0; 10 | this.mass = 1; 11 | this.scaleX = 1; 12 | this.scaleY = 1; 13 | this.name = ""; 14 | this.color = utils.parseColor(color); 15 | this.lineWidth = 1; 16 | 17 | } 18 | 19 | Ball.prototype.draw = function(context){ 20 | context.save(); 21 | context.translate(this.x,this.y); 22 | context.rotate(this.rotation); 23 | context.scale(this.scaleX,this.scaleY); 24 | context.lineWidth = this.lineWidth; 25 | context.fillStyle = this.color; 26 | context.strokeStyle = this.color; 27 | context.beginPath(); 28 | context.arc(0,0,this.radius,0,Math.PI*2,false); 29 | context.closePath(); 30 | context.fill(); 31 | context.stroke(); 32 | context.restore(); 33 | } 34 | 35 | //得到球体的左上角坐标 36 | Ball.prototype.getBounds = function(){ 37 | return { 38 | x: this.x - this.radius, 39 | y: this.y - this.radius, 40 | width: this.radius*2, 41 | height: this.radius*2 42 | }; 43 | } -------------------------------------------------------------------------------- /js/ball3d-s.js: -------------------------------------------------------------------------------- 1 | function Ball3d(radius){ 2 | if(radius === undefined) {radius = 40;} 3 | this.x = 0; 4 | this.y = 0; 5 | this.xpos = 0; 6 | this.ypos = 0; 7 | this.zpos = 0; 8 | this.vz = 0; 9 | this.vx = 0; 10 | this.vy = 0; 11 | this.radius = radius; 12 | this.rotation = 0; 13 | this.mass = 1; 14 | this.scaleX = 1; 15 | this.scaleY = 1; 16 | this.name = ""; 17 | this.lineWidth = 1; 18 | 19 | } 20 | 21 | Ball3d.prototype.draw = function(context){ 22 | context.save(); 23 | context.translate(this.x,this.y); 24 | context.rotate(this.rotation); 25 | context.scale(this.scaleX,this.scaleY); 26 | context.lineWidth = this.lineWidth; 27 | var gradient = context.createRadialGradient(0, 0, 0, 0, 0, this.radius ); 28 | gradient.addColorStop(0,"rgba(255,255,255,1)"); 29 | gradient.addColorStop(0.2,"rgba(0,255,255,1)"); 30 | gradient.addColorStop(0.3,"rgba(0,0,100,1)"); 31 | gradient.addColorStop(1,"rgba(0,0,0,0.1)"); 32 | context.fillStyle = gradient; 33 | context.beginPath(); 34 | context.arc(0,0,this.radius,0,Math.PI*2,false); 35 | context.closePath(); 36 | context.fill(); 37 | context.restore(); 38 | } 39 | 40 | 41 | -------------------------------------------------------------------------------- /速度与加速度/velocity -axis.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | velocity on an axis 6 | 7 | 8 | 9 | your browser not support canvas 10 | 11 | 12 | 13 | 39 | 40 | -------------------------------------------------------------------------------- /js/binaryTree.js: -------------------------------------------------------------------------------- 1 | /*pagram x, y : 树的坐标*/ 2 | /*pagram angle : 树枝的偏转角度*/ 3 | /*pagram genNum : 树枝的代数*/ 4 | /*pagram branchLength : 树枝的长度*/ 5 | 6 | 7 | function Tree(color, angle, genNum, branchLength){ 8 | this.x = 0; 9 | this.y = 0; 10 | this.xpos = 0; 11 | this.ypos = 0; 12 | this.zpos = 0 13 | this.scaleX = 0.85; 14 | this.scaleY = 0.85; 15 | this.gen = 0; 16 | this.alpha = 1; 17 | this.color = utils.parseColor(color); 18 | this.angle = (angle === undefined) ? 0.3 : angle; 19 | this.genNum = (genNum === undefined) ? 6 : genNum; 20 | this.branchLength = (branchLength === undefined) ? 40 : branchLength; 21 | 22 | } 23 | 24 | Tree.prototype.draw = function(ctx){ 25 | ctx.save() 26 | ctx.translate(this.x, this.y); 27 | this.branch(ctx, 0); 28 | ctx.restore(); 29 | } 30 | 31 | Tree.prototype.branch= function(ctx, initAngle){ 32 | this.gen++; 33 | ctx.save(); 34 | ctx.strokeStyle = this.color; 35 | ctx.rotate(initAngle); 36 | ctx.scale(this.scaleX, this.scaleY); 37 | 38 | ctx.beginPath(); 39 | ctx.moveTo(0, 0); 40 | ctx.translate(0, -this.branchLength); 41 | ctx.lineTo(0, 0); 42 | ctx.stroke(); 43 | 44 | if(this.gen <= this.genNum){ 45 | this.branch(ctx, this.angle); 46 | this.branch(ctx, -this.angle); 47 | } 48 | ctx.restore(); 49 | 50 | this.gen--; 51 | } -------------------------------------------------------------------------------- /三角函数与动画/circles-and-ellipses.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | circle-and-ellipses 6 | 7 | 8 | 9 | your browser not support canvas! 10 | 11 | 12 | 13 | 37 | 38 | -------------------------------------------------------------------------------- /速度与加速度/velocity-extend.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | velocity extend 6 | 7 | 8 | 9 | your browser not support canvas 10 | 11 | 12 | 13 | 37 | 38 | -------------------------------------------------------------------------------- /js/tree.js: -------------------------------------------------------------------------------- 1 | function Tree (color) { 2 | this.x = 0; 3 | this.y = 0; 4 | this.xpos = 0; 5 | this.ypos = 0; 6 | this.zpos = 0; 7 | this.scaleX = 1; 8 | this.scaleY = 1; 9 | this.color = utils.parseColor(color); 10 | this.alpha = 1; 11 | this.lineWidth = 1; 12 | this.branch = []; 13 | 14 | //generate some random branch positions 15 | this.branch[0] = -140 - Math.random() * 20; 16 | this.branch[1] = -30 - Math.random() * 30; 17 | this.branch[2] = Math.random() * 80 - 40; 18 | this.branch[3] = -100 - Math.random() * 40; 19 | this.branch[4] = -60 - Math.random() * 40; 20 | this.branch[5] = Math.random() * 60 - 30; 21 | this.branch[6] = -110 - Math.random() * 20; 22 | } 23 | 24 | Tree.prototype.draw = function (context) { 25 | context.save(); 26 | context.translate(this.x, this.y); 27 | context.scale(this.scaleX, this.scaleY); 28 | 29 | context.lineWidth = this.lineWidth; 30 | context.strokeStyle = utils.colorToRGB(this.color, this.alpha); 31 | context.beginPath(); 32 | context.moveTo(0, 0); 33 | context.lineTo(0, this.branch[0]); 34 | context.moveTo(0, this.branch[1]); 35 | context.lineTo(this.branch[2], this.branch[3]); 36 | context.moveTo(0, this.branch[4]); 37 | context.lineTo(this.branch[5], this.branch[6]); 38 | context.stroke(); 39 | context.restore(); 40 | } 41 | -------------------------------------------------------------------------------- /速度与加速度/Angular-velocity.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | angular velocity 6 | 7 | 8 | 9 | your browser not support canvas 10 | 11 | 12 | 13 | 38 | 39 | -------------------------------------------------------------------------------- /速度与加速度/gravity-as-accerlation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | your browser not support canvas 10 | 11 | 12 | 13 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /三角函数与动画/plusing-motion.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | pulsing motion 6 | 7 | 8 | 9 | your browser not support canvas! 10 | 11 | 12 | 13 | 41 | 42 | -------------------------------------------------------------------------------- /缓动与弹性动画/spring-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | your browser not support canvas! 10 | 11 | 12 | 13 | 14 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /三角函数与动画/smooth-circle-motion.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | smooth-up-and-down 6 | 7 | 8 | 9 | your browser not support canvas! 10 | 11 | 12 | 13 | 14 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /音频解析+环形音频可视化/lineCircle.js: -------------------------------------------------------------------------------- 1 | function LineCircle(opt) { 2 | this.x = opt.x || 0; 3 | this.y = opt.y || 0; 4 | this.data = opt.data || []; 5 | this.radius = opt.radius || 80; 6 | this.initAngle = opt.initAngle || 0; 7 | this.lineColor = opt.color || '#ff0'; 8 | } 9 | 10 | LineCircle.prototype.draw = function(ctx) { 11 | ctx.save(); 12 | if(this.data.length == 256) { 13 | ctx.lineWidth = 1.5; 14 | } 15 | if(this.data.length == 128) { 16 | ctx.lineWidth = 3; 17 | } 18 | ctx.strokeStyle = this.lineColor; 19 | ctx.lineCap = 'round'; 20 | var len = this.data.length || 128; 21 | if(len > 0) { 22 | var deleta = 360/len; 23 | for(var i=0; i 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | your browser not support canvas! 10 | 11 | 12 | 13 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /三角函数与动画/wave-with-two-angles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | your browser not support canvas! 10 | 11 | 12 | 13 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /碰撞检测/ray-hit-test.js: -------------------------------------------------------------------------------- 1 | catchBall = { 2 | intersectionPoint: {x:0, y:0}, 3 | 4 | isBallInBucket: function () { 5 | if(lastBallPosition.left === ball.left || 6 | lastBallPosition.top === ball.top){ 7 | return; 8 | } 9 | 10 | //(x1, y1) = Last ball position 11 | //(x2, y2) = Current ball position 12 | //(x3, y3) = Bucket left 13 | //(x4, y4) = Bucket right 14 | 15 | var x1 = lastBallPosition.left, 16 | y1 = lastBallPosition.top, 17 | x2 = ball.left, 18 | y2 = ball.top, 19 | x3 = bucket_left + bucket_width/4, 20 | y3 = bucket_top, 21 | x4 = bucket_left + bucket_width, 22 | y4 = y3; 23 | 24 | //(x1, y1)到(x2, y2)的斜率 25 | var k1 = (ball.top - lastBallPosition.top)/(ball.left - lastBallPosition.left); 26 | 27 | //(x3, y3)到(x4, y4)的斜率 28 | var k2 = (y4 - y3) / (x4 - x3); 29 | 30 | //截距b1 31 | var b1 = y1 - k1*x1; 32 | 33 | //截距b2 34 | var b2 = y3 - k2*x3; 35 | 36 | this.intersectionPoint.x = (b2 - b1) / (k1 - k2); 37 | this.intersectionPoint.y = k1 * this.intersectionPoint.x + b1; 38 | 39 | return intersectionPoint.x > x3 && 40 | intersectionPoint.x < x4 && 41 | ball.top + ball.height > y3 && 42 | ball.left + ball.width < x4; 43 | 44 | } 45 | } -------------------------------------------------------------------------------- /速度与加速度/acceleration.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | acceleration 6 | 7 | 8 | 9 | your browser not support canvas 10 | 11 | 12 | 13 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /三角函数与动画/circular-movement.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | circular-movement 6 | 7 | 8 | 9 | your browser not support canvas! 10 | 11 | 12 | 13 | 44 | 45 | -------------------------------------------------------------------------------- /三角函数与动画/rotate-to-mouse.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | you browser not support canvas 10 | 11 | 12 | 13 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /缓动与弹性动画/easing-to-mouse.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 跟随鼠标移动 6 | 7 | 8 | 9 | your browser not support canvas! 10 | 11 | 12 | 13 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /三角函数与动画/linear-vertical-motion.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | linear-vertical-motion 6 | 7 | 8 | 9 | you browser not support canvas! 10 | 11 | 12 | 13 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /缓动与弹性动画/Chapter8.md: -------------------------------------------------------------------------------- 1 | #chatpter 8 -- easing and spring 2 | 3 | #### 1、Simple easing, long form 4 | ``` 5 | var dx = targetX - object.x, 6 | dy = targetY - object.y; 7 | 8 | var vx = dx * easing, 9 | vy = dy * easing; 10 | 11 | object.x += vx; 12 | object.y += vy; 13 | 14 | ``` 15 | ####2、Simple easing, abbreviated form 16 | ``` 17 | vx = (targetX - object.x) * easing; 18 | vy = (targetY - object.y) * easing; 19 | 20 | object.x += vx; 21 | object.y += vy; 22 | 23 | ``` 24 | ####3、Simple easing，short form 25 | ``` 26 | object.x += (targetX - object.x) * easing; 27 | object.y += (targetY - object.y) * easing; 28 | 29 | ``` 30 | ####4、Simple spring,long form 31 | ``` 32 | var ax = (targetX - object.x) * spring; 33 | var ay = (targetY - object.y) * spring; 34 | 35 | var vx += ax; 36 | var vy += ay; 37 | 38 | vx *= f; 39 | vy *= f; 40 | 41 | object.x += vx; 42 | object.y += vy; 43 | 44 | ``` 45 | ####5、Simple spring,abbreviated form 46 | ``` 47 | vx += (targetX - object.x) * spring; 48 | vy += (targetY - object.y) * spring; 49 | 50 | vx *= f; 51 | vy *= f; 52 | 53 | object.x += vx; 54 | object.y += vy; 55 | 56 | ``` 57 | ####6、Simple spring,short form 58 | ``` 59 | vx += (targetX - object.x) * spring; 60 | vy += (targetY - object.y) * spring; 61 | 62 | object.x += (vx*=f); 63 | object.y += (vy*=f); 64 | 65 | ``` 66 | ####7、 Offset spring 67 | ``` 68 | var dx = object.x - fixedX, 69 | dy = object.y - fixedY; 70 | angle = Math.atan2(dy, dx); 71 | targetX = fixed + Math.cos(angle)*springLength, 72 | targetY = fixed + Math.sin(angle)*springLength; 73 | 74 | //spring to targetX, targetY as above 75 | 76 | ``` 77 | 78 | -------------------------------------------------------------------------------- /碰撞检测/distance-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | your browser not support canvas! 10 | 11 | 12 | 13 | 50 | 51 | -------------------------------------------------------------------------------- /缓动与弹性动画/easing-off.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 缓动停止 6 | 7 | 8 | 9 | your browser not support canvas! 10 | 11 | 12 | 13 | 14 | 46 | 47 | -------------------------------------------------------------------------------- /share/liquild/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 59 | 60 | 61 | 62 | 63 |

你的浏览器不支持canvas

64 | 65 |
66 |

Liquaid

67 | 68 | 69 | 70 |
71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /碰撞检测/distance-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | distance 6 | 7 | 8 | 9 | your browser not support canvas! 10 | 11 | 12 | 13 | 14 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /边界与摩擦力/friction(摩擦力)_1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | your browser not support canvas! 10 | 11 | 12 | 13 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /移动物体/mouse-event.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | your browser not support canvas 10 | 11 | 12 | 13 | 14 | 48 | 49 | -------------------------------------------------------------------------------- /移动物体/touch-event.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | touch-event 6 | 7 | 8 | your browser not support canvas 10 | 11 | 12 | 13 | 50 | 51 | -------------------------------------------------------------------------------- /音频解析+环形音频可视化/analyser.js: -------------------------------------------------------------------------------- 1 | function Analyser (el, fftSize, STC) { 2 | this.el = el; 3 | this.playState = false; 4 | this.audioContext = new AudioContext(); 5 | this.analyser = this.audioContext.createAnalyser(); 6 | this.analyser.smoothingTimeConstant = STC || 1; 7 | this.analyser.fftSize = fftSize || 512; 8 | this.sourceNode =null; 9 | this.audio = null; 10 | this.init(); 11 | } 12 | 13 | Analyser.prototype.init = function() { 14 | var self = this; 15 | this.el.addEventListener('change', function(e) { 16 | var stream = URL.createObjectURL(e.target.files[0]); 17 | if(self.audio) { self.audio.pause() } 18 | self.audio = new Audio(); 19 | self.audio.src = stream; 20 | self.audio.addEventListener('canplay', function(e) { 21 | self.sourceNode = self.audioContext.createMediaElementSource(self.audio); 22 | self.sourceNode.connect(self.analyser); 23 | self.sourceNode.connect(self.audioContext.destination); 24 | self.audio.play(); 25 | self.playState = true; 26 | }) 27 | }) 28 | } 29 | 30 | Analyser.prototype.getTimeData = function() { 31 | if(this.playState) { 32 | var timeArr = new Uint8Array(this.analyser.frequencyBinCount) 33 | this.analyser.getByteTimeDomainData(timeArr); 34 | return timeArr 35 | }else{ 36 | return [] 37 | } 38 | } 39 | 40 | Analyser.prototype.getFreqData = function() { 41 | if(this.playState) { 42 | var freqArr = new Float32Array(this.analyser.frequencyBinCount) 43 | this.analyser.getFloatFrequencyData(freqArr); 44 | return freqArr 45 | }else{ 46 | return [] 47 | } 48 | } 49 | 50 | Analyser.prototype.getAudioLength = function() { 51 | return this.analyser.fftSize / 2 52 | } -------------------------------------------------------------------------------- /js/point3d.js: -------------------------------------------------------------------------------- 1 | function Point3d(x, y ,z){ 2 | this.x = (x === undefined) ? 0 : x; 3 | this.y = (y === undefined) ? 0 : y; 4 | this.z = (z === undefined) ? 0 : z; 5 | 6 | this.fl = 250; //焦距 7 | 8 | this.vpX = 0; //消失点 9 | this.vpY = 0; 10 | 11 | this.cX = 0; //中心点 12 | this.cY = 0; 13 | this.cZ = 0; 14 | } 15 | 16 | Point3d.prototype.setVanishingPoint = function(vpX, vpY){ 17 | this.vpX = vpX; 18 | this.vpY = vpY; 19 | } 20 | 21 | Point3d.prototype.setCenter = function(cX, cY, cZ){ 22 | this.cX = cX; 23 | this.cY = cY; 24 | this.cZ = cZ; 25 | } 26 | 27 | Point3d.prototype.rotateX = function(angleX){ 28 | var cosX = Math.cos(angleX), 29 | sinX = Math.sin(angleX), 30 | y1 = this.y * cosX - this.z * sinX, 31 | z1 = this.z * cosX + this.y * sinX; 32 | 33 | this.y = y1; 34 | this.z = z1; 35 | } 36 | 37 | Point3d.prototype.rotateY = function(angleY){ 38 | var cosY = Math.cos(angleY), 39 | sinY = Math.sin(angleY), 40 | x1 = this.x * cosY - this.z * sinY, 41 | z1 = this.z * cosY + this.x * sinY; 42 | 43 | this.x = x1; 44 | this.z = z1; 45 | } 46 | 47 | Point3d.prototype.rotateZ = function(angleZ){ 48 | var cosZ = Math.cos(angleZ), 49 | sinZ = Math.sin(angleZ), 50 | x1 = this.x * cosZ - this.y * sinZ, 51 | y1 = this.y * cosZ + this.x * sinZ; 52 | 53 | this.x = x1; 54 | this.y = y1; 55 | } 56 | 57 | Point3d.prototype.getScreenX = function(){ 58 | var scale = this.fl / (this.fl + this.cZ); 59 | return this.vpX + (this.cX + this.x) * scale; 60 | } 61 | 62 | Point3d.prototype.getScreenY = function(){ 63 | var scale = this.fl / (this.fl + this.cZ); 64 | return this.vpY + (this.cY + this.y) * scale; 65 | } -------------------------------------------------------------------------------- /js/segment.js: -------------------------------------------------------------------------------- 1 | function Segment(width, height, color){ 2 | this.x = 0; 3 | this.y = 0; 4 | this.vx = 0; 5 | this.vy = 0; 6 | this.scaleX = 1; 7 | this.scaleY = 1; 8 | this.width = width; 9 | this.height = height; 10 | this.color = (color === undefined)? "#ffffff" : utils.parseColor(color); 11 | this.rotation = 0; 12 | this.lineWidth = 1; 13 | } 14 | Segment.prototype.draw = function(context){ 15 | var h = this.height, 16 | d = this.width + h, 17 | cr = h / 2; 18 | 19 | context.save(); 20 | context.translate(this.x, this.y); 21 | context.rotate(this.rotation); 22 | context.scale(this.scaleX, this.scaleY); 23 | context.lineWidth = this.lineWidth; 24 | context.strokeStyle = this.color; 25 | context.fillStyle = "#000"; 26 | context.beginPath(); 27 | context.moveTo(0, -cr); 28 | context.lineTo(d-2*cr, -cr); 29 | context.quadraticCurveTo(-cr+d, -cr, -cr+d, 0); 30 | context.lineTo(-cr+d, 0); 31 | context.quadraticCurveTo(-cr+d, -cr+h, d-2*cr, -cr+h); 32 | context.lineTo(0, -cr+h); 33 | context.quadraticCurveTo(-cr, -cr+h, -cr, 0); 34 | context.lineTo(-cr, 0); 35 | context.quadraticCurveTo(-cr, -cr, 0, -cr); 36 | context.closePath(); 37 | context.fill(); 38 | context.stroke(); 39 | 40 | //draw the 2 "pins" 41 | context.beginPath(); 42 | context.arc(0, 0, 3, 0, Math.PI*2, true); 43 | context.closePath() 44 | context.stroke(); 45 | 46 | context.beginPath(); 47 | context.arc(this.width, 0, 3, 0, Math.PI*2, true); 48 | context.closePath() 49 | context.stroke(); 50 | 51 | context.restore(); 52 | } 53 | 54 | Segment.prototype.getPin = function(){ 55 | return { 56 | x:this.x + Math.cos(this.rotation)*this.width, 57 | y:this.y + Math.sin(this.rotation)*this.width 58 | } 59 | } -------------------------------------------------------------------------------- /边界与摩擦力/bouncing1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | your browser not support canvas! 10 | 11 | 12 | 13 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /坐标旋转与角度反弹/多物体旋转.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | 11 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /碰撞检测/point-hit-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | point-hit 6 | 12 | 13 | 14 | 15 | your browser not support canvas! 16 | 17 |

没撞上

18 | 19 | 20 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /弹幕/atom.js: -------------------------------------------------------------------------------- 1 | function Atom(opt) { 2 | this.x = opt.x || 0; 3 | this.y = opt.y || 0; 4 | this.text = opt.text || '测试文本测试文本测试'; 5 | this.textColor = opt.textColor || '#ffffff'; 6 | this.bgColor = opt.bgColor || 'rgba(255,255,255, 0.4)' 7 | this.speed = opt.speed || 1; 8 | this.ratio = opt.ratio || 1; 9 | this.fontSize = opt.fontSize || 35; 10 | this.scaleX = this.scaleY = this.ratio * 1; 11 | this.padding = opt.padding || this.fontSize; 12 | this.isNeedBg = opt.isNeedBg; 13 | this.width = 0; 14 | } 15 | 16 | Atom.prototype.draw = function(ctx) { 17 | ctx.font = this.fontSize + 'px Arial'; 18 | ctx.textAlign = 'left'; 19 | ctx.textBaseline = 'bottom'; 20 | 21 | var height = this.fontSize + this.padding; 22 | var width = ctx.measureText(this.text).width + this.padding; 23 | var radius = height/2; 24 | 25 | this.width = width + radius*2; 26 | 27 | if(this.isNeedBg) { 28 | ctx.save(); 29 | ctx.translate(this.x, this.y); 30 | ctx.scale(this.scaleX, this.scaleY); 31 | ctx.fillStyle = this.bgColor; 32 | ctx.moveTo(this.x, this.y+this.radius); 33 | ctx.arc(this.x, this.y+radius, radius, 0, Math.PI*2); 34 | ctx.moveTo(this.x+width, this.y+this.radius); 35 | ctx.arc(this.x+width, this.y+radius, radius, 0, Math.PI*2); 36 | ctx.moveTo(this.x, this.y); 37 | ctx.rect(this.x, this.y, width, height); 38 | ctx.closePath(); 39 | ctx.fill(); 40 | ctx.restore(); 41 | } 42 | 43 | ctx.save(); 44 | ctx.translate(this.x, this.y); 45 | ctx.scale(this.scaleX, this.scaleY); 46 | ctx.fillStyle = this.textColor; 47 | ctx.beginPath(); 48 | ctx.fillText(this.text, this.x+this.padding/2, this.y+this.fontSize+this.padding/2) 49 | ctx.closePath(); 50 | ctx.fill(); 51 | ctx.restore(); 52 | } 53 | 54 | -------------------------------------------------------------------------------- /js/Line.js: -------------------------------------------------------------------------------- 1 | function Line(x1, y1, x2, y2){ 2 | this.x = 0; 3 | this.y = 0; 4 | this.x1 = (x1 === undefined) ? 0 : x1; 5 | this.y1 = (y1 === undefined) ? 0 : y1; 6 | this.x2 = (x2 === undefined) ? 0 : x2; 7 | this.y2 = (y2 === undefined) ? 0 : y2; 8 | this.rotation = 0; 9 | this.scaleX = 1; 10 | this.scaleY = 1; 11 | this.lineWidth = 1; 12 | } 13 | 14 | Line.prototype.draw = function(context){ 15 | context.save(); 16 | context.translate(this.x, this.y); 17 | context.rotate(this.rotation); 18 | context.scale(this.scaleX, this.scaleY); 19 | context.lineWidth = this.lineWidth; 20 | context.beginPath(); 21 | context.moveTo(this.x1, this.y1); 22 | context.lineTo(this.x2, this.y2); 23 | context.closePath(); 24 | context.stroke(); 25 | context.restore(); 26 | } 27 | 28 | Line.prototype.getBounds = function(){ 29 | if(this.rotation === 0){ 30 | var minX = Math.min(this.x1, this.x2), 31 | minY = Math.min(this.y1, this.y2), 32 | maxX = Math.max(this.x1, this.x2), 33 | maxY = Math.max(this.y1, this.y2); 34 | 35 | return { 36 | x: this.x + minX, 37 | y: this.y + minY, 38 | width: maxX - minX, 39 | height: maxY - minY 40 | }; 41 | }else{ 42 | var sin = Math.sin(this.rotation), 43 | cos = Math.cos(this.rotation), 44 | x1r = cos*this.x1 + sin*this.y1, 45 | x2r = cos*this.x2 + sin*this.y2, 46 | y1r = cos*this.y1 + sin*this.x1, 47 | y2r = cos*this.y2 + sin*this.x2; 48 | 49 | return { 50 | x: this.x + Math.min(x1r, x2r), 51 | y: this.y + Math.min(y1r, y2r), 52 | width: Math.max(x1r, x2r) - Math.min(x1r, x2r), 53 | height: Math.max(y1r, y2r) - Math.min(y1r, y2r) 54 | }; 55 | } 56 | } -------------------------------------------------------------------------------- /缓动与弹性动画/spring2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | your browser not support canvas! 10 | 11 | 12 | 13 | 14 | 15 | 16 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /边界与摩擦力/bouncing2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | your browser not support canvas! 10 | 11 | 12 | 13 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /三角函数与动画/第三章总结.md: -------------------------------------------------------------------------------- 1 | #Important formulas in this chapter 2 | Loot at this. you have a brand new shiny programning toolbox,and already you have more than ahalf-dozen tools to put in it.Thr ful set of tools asle appears in Appendix A,but let's look at what you added so far.I kept these formulas as simple and abstract as possible.so they don't varible declarations.It's up to you to work ths formuals into your own scripts using the proper sytax required for ths situation. 3 | ##Calculate basic trigonometric functions 4 | sine of angle = oppodite / hypotenuse 5 | cosine of angle = adjacent / hypotenuse 6 | tangent of angle = opposite / adjacent 7 | ##Convert radians to degree and degrees to radisns 8 | radians = degree * Math.PI/180 9 | degree = radians *180/Math.PI 10 | ##跟随鼠标转动（或任一点） 11 | dx = mouse.x - object.x; 12 | dy = mouse.y - object.y; 13 | object.rotation = Math.atan2(dy,dx)*180/Math.PI 14 | ##Create waves 15 | //assign value to x,y or other property of anobject 16 | //use as drawing coordinates ,etc 17 | (function drawFrame(){ 18 | window.requestAnimationFrame(drawFrame, canvas); 19 | value = center + Math.sin(angle)*range; 20 | angle += speed; 21 | }()); 22 | ##Create circles 23 | //assign position to x and y of object or drawing coordinate 24 | (function drawFrame(){ 25 | window.requestAnimationFrame(drawFrame, canvas); 26 | 27 | x_position = centerX + Math.sin(angle)*radius; 28 | y_position = centerY + Math.cos(angle)*radius; 29 | angle += speed; 30 | }()); 31 | ##Create ovals 32 | //assgin position to x and y of object or drawing coordinate 33 | (function drawFrame(){ 34 | window.requestAnimationFrame(drawGrame, canvas); 35 | 36 | x_position = centerX + Math.cos(angle)*radiusX; 37 | y_position = centerY + Math.sin(angle)*radiusY; 38 | angle += speed; 39 | }()); 40 | ##Get the distance between two points 41 | //points are x1,y1 and x2,y2 42 | //can be object positions, mouse coordinates,etc 43 | dx = x2 - x1; 44 | dy = y2 - y1; 45 | dist = Math.sqrt(dx*dx + dy*dy); -------------------------------------------------------------------------------- /3D动画/perspective-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 3D视角 6 | 7 | 8 | 9 | 10 | 11 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /缓动与弹性动画/spring-line.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | your browser not support canvas! 10 | 11 | 12 | 13 | 14 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /移动物体/物体拖动.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | dragging an object 6 | 7 | 8 | 9 | your browser not support canvas 10 | 11 | 12 | 13 | 57 | 58 | -------------------------------------------------------------------------------- /桌球运动/billiard-opt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | billiard-opt 6 | 7 | 8 | 9 | 10 | 11 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /桌球运动/billiard.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | billiard 6 | 7 | 8 | 9 |

your browser not support canvas

10 | 11 | 12 | 13 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /每周一点canvas动画/canvas百分比加载.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 63 | 64 | -------------------------------------------------------------------------------- /三角函数与动画/mouse-distance.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | mouse-distance 6 | 13 | 14 | 15 | 16 | your browser not support canvas! 17 | 18 |

19 | 20 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /碰撞检测/object-hit-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | collision detection 6 | 14 | 15 | 16 | 17 | your browser not support canvas!!! 18 | 19 |

没撞上

20 | 21 | 22 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /3D物体/lines-3d-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | 11 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /缓动与弹性动画/easing-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | easing-2 6 | 7 | 8 | 9 | your browser not support canvas! 10 | 11 | 12 | 13 | 14 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /速度与加速度/mouse-floow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | mouse floow 6 | 7 | 8 | 9 | you browser not support canvas 10 | 11 | 12 | 13 | 14 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /缓动与弹性动画/offset-spring.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | offset-spring 6 | 7 | 8 | 9 | your browser not support canvas!!! 10 | 11 | 12 | 13 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /3D动画/easing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | easing-3d 6 | 7 | 8 | 9 | 10 | 11 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /3D动画/trees-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Trees 1 6 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /三角函数与动画/distance-between-two-points.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | distance-between-two-points 6 | 14 | 15 | 16 | 17 | your browser not support canvas! 18 | 19 |

20 | 21 | 73 | 74 | -------------------------------------------------------------------------------- /边界与摩擦力/refenerating-object.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | 11 | your browser not support canvas 12 | 13 |

14 | 15 | 16 | 68 | -------------------------------------------------------------------------------- /万有引力/gravity.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | gravity 6 | 7 | 8 | 9 | 10 | 11 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /缓动与弹性动画/chain.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | your browser not support canvas! 10 | 11 | 12 | 13 | 14 | 76 | 77 | -------------------------------------------------------------------------------- /每周一点canvas动画/martrix.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Martrix 6 | 14 | 15 | 16 | 17 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /坐标旋转与角度反弹/角度反弹优化.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /坐标旋转与角度反弹/角度反弹.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | angle-bounce 6 | 7 | 8 | 9 | 10 | 11 | 12 | 76 | 77 | -------------------------------------------------------------------------------- /3D动画/spring.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | spring 6 | 7 | 8 | 9 | 10 | 11 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /速度与加速度/acceleration-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | acceleration-2 6 | 7 | 8 | 9 | your browser not support canvas 10 | 11 | 12 | 13 | 79 | 80 | -------------------------------------------------------------------------------- /坐标旋转与角度反弹/角度反弹-鼠标旋转线段.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | 11 | 12 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /碰撞检测/multi-object-hit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | multi-object-hit 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 85 | 86 | -------------------------------------------------------------------------------- /3D动画/gravity.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Multiple bouncing 6 | 7 | 8 | 9 | 10 | 11 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /边界与摩擦力/boundaries_remove.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 16 | 17 | 18 | 19 | your browser not support canvas 20 | 21 |

22 | 23 | 24 | 78 | 79 | -------------------------------------------------------------------------------- /3D动画/velocity-3d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | velocity 6 | 7 | 8 | 9 | 10 | 11 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /弹幕/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 18 | 19 | 20 |
21 | 22 |
23 | 24 | 25 | 83 | 84 | -------------------------------------------------------------------------------- /碰撞检测/boxes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | boxes 6 | 7 | 8 | 9 | your browser not support canvas! 10 | 11 | 12 | 13 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /js/slider.js: -------------------------------------------------------------------------------- 1 | function Slider (min, max, value) { 2 | this.min = (min === undefined) ? 0 : min; 3 | this.max = (max === undefined) ? 100 : max; 4 | this.value = (value === undefined) ? 100 : value; 5 | this.onchange = null; 6 | 7 | this.x = 0; 8 | this.y = 0; 9 | this.width = 16; 10 | this.height = 100; 11 | 12 | this.backColor = "#cccccc"; 13 | this.backBorderColor = "#999999"; 14 | this.backWidth = 4; 15 | this.backX = this.width / 2 - this.backWidth / 2; 16 | 17 | this.handleColor = "#eeeeee"; 18 | this.handleBorderColor = "#cccccc"; 19 | this.handleHeight = 6; 20 | this.handleY = 0; 21 | 22 | this.updatePosition(); 23 | } 24 | 25 | Slider.prototype.draw = function (context) { 26 | context.save(); 27 | context.translate(this.x, this.y); 28 | 29 | //draw back 30 | context.fillStyle = this.backColor; 31 | context.beginPath(); 32 | context.fillRect(this.backX, 0, this.backWidth, this.height); 33 | context.closePath(); 34 | 35 | //draw handle 36 | context.strokeStyle = this.handleBorderColor; 37 | context.fillStyle = this.handleColor; 38 | context.beginPath(); 39 | context.rect(0, this.handleY, this.width, this.handleHeight); 40 | context.closePath(); 41 | context.fill(); 42 | context.stroke(); 43 | 44 | context.restore(); 45 | }; 46 | 47 | Slider.prototype.updateValue = function () { 48 | var old_value = this.value, 49 | handleRange = this.height - this.handleHeight, 50 | valueRange = this.max - this.min; 51 | 52 | this.value = (handleRange - this.handleY) / handleRange * valueRange + this.min; 53 | if (typeof this.onchange === 'function' && this.value !== old_value) { 54 | this.onchange(); 55 | } 56 | }; 57 | 58 | Slider.prototype.updatePosition = function () { 59 | var handleRange = this.height - this.handleHeight, 60 | valueRange = this.max - this.min; 61 | 62 | this.handleY = handleRange - ((this.value - this.min) / valueRange) * handleRange; 63 | }; 64 | 65 | Slider.prototype.captureMouse = function (element) { 66 | var self = this, 67 | mouse = utils.captureMouse(element), 68 | bounds = {}; 69 | 70 | setHandleBounds(); 71 | 72 | element.addEventListener('mousedown', function () { 73 | if (utils.containsPoint(bounds, mouse.x, mouse.y)) { 74 | element.addEventListener('mouseup', onMouseUp, false); 75 | element.addEventListener('mousemove', onMouseMove, false); 76 | } 77 | }, false); 78 | 79 | function onMouseUp () { 80 | element.removeEventListener('mousemove', onMouseMove, false); 81 | element.removeEventListener('mouseup', onMouseUp, false); 82 | setHandleBounds(); 83 | } 84 | 85 | function onMouseMove () { 86 | var pos_y = mouse.y - self.y; 87 | self.handleY = Math.min(self.height - self.handleHeight, Math.max(pos_y, 0)); 88 | self.updateValue(); 89 | } 90 | 91 | function setHandleBounds () { 92 | bounds.x = self.x; 93 | bounds.y = self.y + self.handleY; 94 | bounds.width = self.width; 95 | bounds.height = self.handleHeight; 96 | } 97 | }; 98 | -------------------------------------------------------------------------------- /边界与摩擦力/ship-friction.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | your browser not support canvas 10 | 11 | 12 | 13 | 85 | 86 | -------------------------------------------------------------------------------- /3D动画/rotate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | rotate-3d 6 | 7 | 8 | 9 | 10 | 11 | 87 | 88 | -------------------------------------------------------------------------------- /坐标旋转与角度反弹/角度反弹-鼠标旋转线段-hit-text.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | 11 | 12 | 81 | 82 | -------------------------------------------------------------------------------- /js/rule2.js: -------------------------------------------------------------------------------- 1 | function Rule(props) { 2 | this.x = props.x || 0; 3 | this.y = props.y || 0; 4 | this.vx = 0; 5 | this.ax = 0 6 | this.color = props.color || "#ffffff"; 7 | this.scaleX = props.scaleX || 1; 8 | this.scaleY = props.scaleY || 1; 9 | this.markShort = -props.markShort || -5; 10 | this.markLong = -props.markLong || -10; 11 | this.textHeight = -props.textHeight || -5; 12 | this.min = props.min || 1; //最小金额 13 | this.max = props.max || 10000; // 最大金额 14 | this.width = props.width || 1000; //尺子的宽度 15 | this.step = props.step || 1000; // 步长 16 | this.seg = Math.floor(this.max / this.step); // 段数 17 | this.pxStep = Math.floor(this.width / this.seg); //每段在canvas上的实际宽度 18 | this.miniPxStep = this.pxStep / 10; //每个刻度在canvas上的实际像素距离 19 | this.ratioScale = Math.floor(this.max / this.width); //比例尺 20 | 21 | this.lineBottom = Object.assign({},{ 22 | mx: null, 23 | my: null, 24 | lx: null, 25 | ly: null, 26 | color:'#fff' 27 | },props.lineBottom || {}); 28 | 29 | this.lineRed = Object.assign({},{ 30 | mx:0, 31 | my:0, 32 | lx:0, 33 | ly:5, 34 | color:'red', 35 | isDrawRedLine:true 36 | }, props.lineRed || {}); 37 | } 38 | 39 | Rule.prototype.draw = function(ctx) { 40 | var n = 0; 41 | ctx.save(); 42 | ctx.translate(this.x, this.y); 43 | ctx.lineWidth = 1; 44 | ctx.scale(this.scaleX, this.scaleY); 45 | ctx.fillStyle = this.color; 46 | ctx.strokeStyle = this.color; 47 | ctx.textAlign="center"; 48 | ctx.beginPath(); 49 | for(var i=0 ; i<=this.width; i+=this.miniPxStep) { 50 | ctx.moveTo(i, 0); 51 | if(n%10 ===0){ 52 | ctx.lineTo(i, this.markLong); 53 | if(i===0){ 54 | ctx.fillText(1, i, this.markLong + this.textHeight); 55 | }else{ 56 | ctx.fillText((n/10) * this.step, i, this.markLong + this.textHeight); 57 | } 58 | }else{ 59 | ctx.lineTo(i, this.markShort); 60 | } 61 | n++; 62 | } 63 | ctx.closePath(); 64 | ctx.stroke(); 65 | ctx.restore(); 66 | 67 | // 底部横线 68 | ctx.save(); 69 | ctx.strokeStyle = this.lineBottom.color; 70 | ctx.scale(this.scaleX, this.scaleY); 71 | ctx.beginPath(); 72 | ctx.moveTo(this.lineBottom.mx, this.lineBottom.my); 73 | ctx.lineTo(this.lineBottom.lx, this.lineBottom.ly); 74 | ctx.stroke(); 75 | ctx.closePath(); 76 | ctx.restore(); 77 | 78 | //中心线 79 | if(this.lineRed.isDrawRedLine){ 80 | ctx.save(); 81 | ctx.strokeStyle = this.lineRed.color; 82 | ctx.lineWidth = 1; 83 | ctx.scale(this.scaleX, this.scaleY); 84 | ctx.beginPath(); 85 | ctx.moveTo(this.lineRed.mx, this.lineRed.my); 86 | ctx.lineTo(this.lineRed.lx, this.lineRed.ly); 87 | ctx.stroke(); 88 | ctx.closePath(); 89 | ctx.restore(); 90 | } 91 | } -------------------------------------------------------------------------------- /万有引力/node-garden.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | node-garden 6 | 7 | 8 | 9 | 10 | 11 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /3D动画/bouncing-3d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | bouncing 6 | 7 | 8 | 9 | 10 | 11 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /js/natureTree.js: -------------------------------------------------------------------------------- 1 | function ranColor(){ 2 | return '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6); 3 | } 4 | 5 | /* 6 | spread: 树杈分支数 7 | */ 8 | 9 | function NatureTree(ctx){ 10 | this.x = 0; 11 | this.y = 0; 12 | this.xpos = 0; 13 | this.ypos = 0; 14 | this.zpos = 0; 15 | this.scaleX = 0.85; 16 | this.scaleY = 0.85; 17 | this.ctx = ctx; 18 | this.alpha = 1; 19 | this.spread = 0.6; 20 | this.drawLeaves = true; 21 | this.leavesColor = ranColor(); 22 | this.max_branch_width = 20; 23 | this.max_branch_height = 60; 24 | 25 | this.small_leaves = 10; //树叶状态 26 | this.medium_leaves = 200; 27 | this.big_leaves = 500; 28 | this.thin_leaves = 900; 29 | 30 | this.leaveType = this.medium_leaves; 31 | } 32 | 33 | NatureTree.prototype.draw = function(spread, leaves, leaveType){ 34 | //设置树杈分多少枝 35 | if(spread >=0.3 && spread<=1){ 36 | this.spread = spread; 37 | }else{ 38 | this.spread = 0.6 39 | } 40 | 41 | //是否绘制树叶 42 | if(leaves === true || leaves === false){ 43 | this.drawLeaves = leaves; 44 | }else{ 45 | this.drawLeaves = true; 46 | } 47 | 48 | if(leaveType == this.small_leaves || 49 | leaveType == this.medium_leaves || 50 | leaveType == this.big_leaves || 51 | leaveType == this.thin_leaves){ 52 | this.leaveType = leaveType; 53 | }else{ 54 | this.leaveType = this.medium_leaves; 55 | } 56 | 57 | this.ctx.save(); 58 | this.ctx.lineWidth = 1 + Math.random()*this.max_branch_width; 59 | this.ctx.lineCap = 'round'; 60 | this.ctx.lineJoin = 'round'; 61 | this.ctx.translate(this.x, this.y); 62 | this.ctx.scale(this.scaleX, this.scaleY); 63 | this.branchAndLeaves(0); 64 | this.ctx.restore(); 65 | } 66 | 67 | NatureTree.prototype.branchAndLeaves = function(gen){ 68 | if(gen < 12){ 69 | this.ctx.save(); 70 | 71 | this.ctx.beginPath(); 72 | this.ctx.moveTo(0, 0); 73 | this.ctx.lineTo(0, -this.max_branch_height); 74 | this.ctx.stroke(); 75 | 76 | this.ctx.translate(0, -this.max_branch_height); 77 | 78 | var randomN = -(Math.random()*0.1) + 0.1; 79 | this.ctx.rotate(randomN); 80 | 81 | if((Math.random()*1) < this.spread){ 82 | //画左侧树枝 83 | this.ctx.rotate(-0.35); 84 | this.ctx.scale(0.7, 0.7); 85 | this.ctx.save(); 86 | this.branchAndLeaves(gen + 1); 87 | this.ctx.restore(); 88 | 89 | //画右侧树枝 90 | this.ctx.rotate(0.6); 91 | this.ctx.save(); 92 | this.branchAndLeaves(gen + 1); 93 | this.ctx.restore(); 94 | }else{ 95 | 96 | this.branchAndLeaves(gen); 97 | 98 | } 99 | 100 | this.ctx.restore(); 101 | 102 | }else{ 103 | //枝条画完画树叶 104 | if(this.drawLeaves){ 105 | var lengthFactor = 200; 106 | if(this.leaveType === this.thin_leaves){ 107 | leaveFactor = 10; 108 | } 109 | this.ctx.save(); 110 | this.ctx.fillStyle = this.leavesColor; 111 | this.ctx.fillRect(0, 0, this.leaveType, lengthFactor); 112 | this.ctx.restore(); 113 | } 114 | } 115 | } -------------------------------------------------------------------------------- /碰撞检测/spring-collision-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | collision-based spring 6 | 7 | 8 | 9 | 10 | 11 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /移动物体/物体拖动2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | your browser not support canvas 10 | 11 | 12 | 13 | 92 | 93 | -------------------------------------------------------------------------------- /3D动画/multiple-bouncing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Multiple bouncing 6 | 7 | 8 | 9 | 10 | 11 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /缓动与弹性动画/multi-spring.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | multi-spring 6 | 7 | 8 | 9 | your browser not support canvas! 10 | 11 | 12 | 13 | 14 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /万有引力/node-garden-line.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | node-garden 6 | 7 | 8 | 9 | 10 | 11 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /移动物体/rule.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 移动距离为： 13 | 14 | your browser not support canvas! 15 | 16 | 17 | 18 | 19 | 97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /众筹射击小游戏/plane.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 110 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /三角函数与动画/waves-with-drawing-api.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 41 | 42 | 43 | 44 | your browser not support canvas! 45 | 46 |
47 |

振幅:

48 |
49 | 50 | 51 | 52 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /坐标旋转与角度反弹/高级坐标旋转.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | 11 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /3D动画/trees-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Trees 1 6 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /万有引力/node-garden-mass.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | node-garden 6 | 7 | 8 | 9 | 10 | 11 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /3D动画/collision.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | 11 | 110 | 111 | -------------------------------------------------------------------------------- /3D动画/z-sort.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Multiple bouncing 6 | 7 | 8 | 9 | 10 | 11 | 98 | 99 | 100 | --------------------------------------------------------------------------------