html5 几何线条,HTML5 几何切线动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

'use strict';

var _createClass = (function() {

function defineProperties(target, props) {

for (var i = 0; i < props.length; i++) {

var descriptor = props[i];

descriptor.enumerable = descriptor.enumerable || false;

descriptor.configurable = true;

if ('value' in descriptor) descriptor.writable = true;

Object.defineProperty(target, descriptor.key, descriptor);

}

}

return function(Constructor, protoProps, staticProps) {

if (protoProps) defineProperties(Constructor.prototype, protoProps);

if (staticProps) defineProperties(Constructor, staticProps);

return Constructor;

};

})();

function _toConsumableArray(arr) {

if (Array.isArray(arr)) {

for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];

return arr2;

} else {

return Array.from(arr);

}

}

function _classCallCheck(instance, Constructor) {

if (!(instance instanceof Constructor)) {

throw new TypeError('Cannot call a class as a function');

}

}

var Vector = (function() {

'use strict';

var Vector = (function() {

function Vector() {

var x = arguments[0] === undefined ? 0 : arguments[0];

var y = arguments[1] === undefined ? 0 : arguments[1];

_classCallCheck(this, Vector);

this.x = x;

this.y = y;

}

_createClass(Vector, [{

key: 'arr',

value: function arr() {

return [this.x, this.y];

}

}, {

key: 'add',

value: function add(v) {

return new Vector(this.x + v.x, this.y + v.y);

}

}, {

key: 'sub',

value: function sub(v) {

return new Vector(this.x - v.x, this.y - v.y);

}

}, {

key: 'mul',

value: function mul(a) {

return new Vector(this.x * a, this.y * a);

}

}, {

key: 'div',

value: function div(a) {

return new Vector(this.x / a, this.y / a);

}

}, {

key: 'mix',

value: function mix(v, a) {

return this.mul(1 - a).add(v.mul(a));

}

}, {

key: 'angle',

value: function angle() {

var _angle = arguments[0] === undefined ? null : arguments[0];

if (_angle === null) return Math.atan2(this.y, this.x);

if (_angle instanceof Vector) return this.angle() - _angle.angle();

return Vector.polar(this.len(), _angle);

}

}, {

key: 'rotate',

value: function rotate(angle) {

return Vector.polar(this.len(), this.angle() + angle);

}

}, {

key: 'len2',

value: function len2() {

return this.x * this.x + this.y * this.y;

}

}, {

key: 'len',

value: function len() {

var a = arguments[0] === undefined ? null : arguments[0];

var len = Math.sqrt(this.len2());

if (a === null) return len;

return this.mul(a / len);

}

}, {

key: 'norm',

value: function norm() {

return this.len(1);

}

}, {

key: 'dist2',

value: function dist2(v) {

return this.sub(v).len2();

}

}, {

key: 'dist',

value: function dist(v) {

return this.sub(v).len();

}

}, {

key: 'dot',

value: function dot(v) {

return this.x * v.x + this.y * v.y;

}

}, {

key: 'cross',

value: function cross(v) {

return this.x * v.y - this.y * v.x;

}

}], [{

key: 'polar',

value: function polar() {

var r = arguments[0] === undefined ? 0 : arguments[0];

var t = arguments[1] === undefined ? 0 : arguments[1];

return new Vector(r * Math.cos(t), r * Math.sin(t));

}

}]);

return Vector;

})();

Vector.deg = 180 / Math.PI;

Vector.turn = 0.5 / Math.PI;

return Vector;

})();

;

/*if(window.CP)

window.CP.shouldStopExecution = a=>0;

*/

var Circle = function Circle(x, y, r) {

_classCallCheck(this, Circle);

this.center = new Vector(x, y);

this.radius = r;

};

(function() {

var canvas = document.createElement('canvas');

var ctx = canvas.getContext('2d');

document.body.appendChild(canvas);

var win;

var mid;

var mouse = new Vector();

(window.onresize = function() {

win = new Vector(window.innerWidth, window.innerHeight);

mid = win.div(2);

canvas.width = win.x;

canvas.height = win.y;

draw();

})();

window.addEventListener('mousemove', function(e) {

mouse = new Vector(e.pageX, e.pageY).sub(mid);

draw();

});

(function loop() {

draw();

requestAnimationFrame(loop);

})();

function draw() {

ctx.fillRect(0, 0, win.x, win.y);

var c1 = new Circle(mouse.x, mouse.y, Math.min(mid.x, mid.y) / 6);

var c2 = new Circle(0, 0, Math.min(mid.x, mid.y));

drawCircle(c1);

drawCircle(c2);

drawElipse(c1, c2);

}

function drawCircle(c) {

ctx.strokeStyle = '#fff';

ctx.beginPath();

var ctr = mid.add(c.center);

ctx.arc(ctr.x, ctr.y, c.radius, 0, Math.PI * 2, 1);

ctx.stroke();

ctx.strokeStyle = '#999';

ctx.beginPath();

ctx.moveTo(ctr.x - 10, ctr.y);

ctx.lineTo(ctr.x + 10, ctr.y);

ctx.moveTo(ctr.x, ctr.y - 10);

ctx.lineTo(ctr.x, ctr.y + 10);

ctx.stroke();

}

function drawElipse(c1, c2) {

var R = (c1.radius + c2.radius) / 2;

var d = c1.center.dist(c2.center) / 2;

var r = Math.sqrt(R * R - d * d);

var center = c1.center.mix(c2.center, 0.5);

var rot = c1.center.sub(c2.center).angle();

var max = 100;

ctx.strokeStyle = '#0ff';

ctx.beginPath();

for (var i = 0; i <= max; i++) {

var angle = Math.PI * 2 * i / max;

var pt = Vector.polar(R, angle);

pt.y *= r / R;

pt = pt.rotate(rot);

pt = pt.add(center);

ctx[i ? 'lineTo' : 'moveTo'].apply(ctx, _toConsumableArray(pt.add(mid).arr()));

//console.log('pt', pt);

}

ctx.stroke();

ctx.beginPath();

var angle = Date.now() / 1000 - rot;

var pt = Vector.polar(R, angle);

pt.y *= r / R;

pt = pt.rotate(rot);

pt = pt.add(center);

ctx[i ? 'lineTo' : 'moveTo'].apply(ctx, _toConsumableArray(pt.add(mid).arr()));

//console.log('pt', pt);

var r = Math.max(pt.dist(c1.center) - c1.radius, pt.dist(c2.center) - c2.radius);

drawCircle(new Circle(pt.x, pt.y, r));

ctx.stroke();

}

})();