JavaScript

語言：

JaveScriptBabelCoffeeScript

確定

var canvas, ctx, cw, ch;

var particles = [],

grid = [];

const MIN_VEL = -6,

MAX_VEL = 6,

NUM_PARTICLES = 400,

RADIUS = 0,

ISGRAYSCALE = false,

LINEWIDTH = 0.3,

FPS = 1000 / 60,

GRID_WIDTH = 6,

GRID_HEIGHT = 6,

ALPHA = 0.5;

var CIRCLE_RADIUS;

var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {

return setTimeout(callback, FPS);

};

window.onload = function() {

canvas = document.getElementById("canvas");

initCanvas();

window.onresize = function() {

initCanvas();

CIRCLE_RADIUS = Math.min(cw, ch) * 0.4;

init();

};

init();

}

function initCanvas() {

ctx = canvas.getContext("2d");

cw = window.innerWidth;

ch = window.innerHeight;

canvas.width = cw;

canvas.height = ch;

}

function init() {

grid = [];

particles = [];

CIRCLE_RADIUS = Math.min(cw, ch) * 0.4;

for (var i = 0; i < Math.PI * 2; i += 0.1) {

var x = cw / 2 + CIRCLE_RADIUS * Math.cos(i);

var y = ch / 2 + CIRCLE_RADIUS * Math.sin(i);

grid.push(new Particle("#101010", 0, new Point(x, y)));

}

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

for (var j = 0; j <= GRID_HEIGHT; j++) {

var point;

do {

point = new Point(cw / 2 + getRandomNumber(-CIRCLE_RADIUS, CIRCLE_RADIUS), ch / 2 + getRandomNumber(-CIRCLE_RADIUS, CIRCLE_RADIUS));

} while (!isInCircle(point));

grid.push(new Particle("#101010", 0, point));

}

}

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

var r = getRandomInt(0, 255);

var g = r;

var b = r;

if (!ISGRAYSCALE) {

g = getRandomInt(0, 255);

b = getRandomInt(0, 255);

}

var point;

do {

point = new Point(cw / 2 + getRandomNumber(-CIRCLE_RADIUS, CIRCLE_RADIUS), ch / 2 + getRandomNumber(-CIRCLE_RADIUS, CIRCLE_RADIUS));

} while (!isInCircle(point));

particles.push(new Particle("rgba(" + r + "," + g + "," + b + "," + ALPHA + ")", RADIUS, point, new Vector(new Point(), new Point(getRandomNumber(MIN_VEL, MAX_VEL), getRandomNumber(MIN_VEL, MAX_VEL)))));

}

animate();

}

function getCloserPoints(p) {

var distances = [];

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

distances.push({

index: i,

distance: p.position.distance(grid[i].position)

});

}

distances.sort(function compare(a, b) {

if (a.distance < b.distance) {

return -1;

}

if (a.distance > b.distance) {

return 1;

}

// a must be equal to b

return 0;

});

return [distances[0].index, distances[1].index, distances[2].index, distances[3].index];

}

function animate() {

ctx.clearRect(0, 0, cw, ch);

var grd = ctx.createRadialGradient(cw / 2, ch / 2, 5, cw / 2, ch / 2, Math.min(cw, ch));

grd.addColorStop(0, "#636363");

grd.addColorStop(1, "#101010");

ctx.fillStyle = grd;

ctx.fillRect(0, 0, cw, ch);

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

if (!isInCircle(particles[i].position)) {

invertMovement(i);

}

// if (particles[i].position.x >= cw || particles[i].position.x <= 0) invertMovement(i, "x");

// if (particles[i].position.y >= ch || particles[i].position.y <= 0) invertMovement(i, "y");

particles[i].position = particles[i].distance(particles[i].time);

drawParticle(particles[i]);

particles[i].time++;

var points = getCloserPoints(particles[i]);

drawTriangle(particles[i], grid[points[0]], grid[points[1]]);

drawTriangle(particles[i], grid[points[2]], grid[points[3]]);

}

requestAnimationFrame(animate);

}

function isInCircle(point) {

return (Math.pow((point.x - cw / 2), 2) + Math.pow((point.y - ch / 2), 2) < Math.pow(CIRCLE_RADIUS, 2))

}

function drawTriangle(a, b, c) {

ctx.beginPath();

ctx.fillStyle = a.color;

ctx.moveTo(a.position.x, a.position.y);

ctx.lineTo(b.position.x, b.position.y);

ctx.lineTo(c.position.x, c.position.y);

ctx.fill();

}

function invertMovement(index, axis) {

particles[index].vel = particles[index].vel.inverse(axis);

particles[index].initPos = particles[index].position.clone();

particles[index].time = 1;

}

function lineParticles(p1, p2) {

ctx.beginPath();

var gradient = ctx.createLinearGradient(p1.position.x, p1.position.y, p2.position.x, p2.position.y);

gradient.addColorStop("0", p1.color);

gradient.addColorStop("1.0", p2.color);

ctx.strokeStyle = gradient;

ctx.lineWidth = LINEWIDTH;

ctx.moveTo(p1.position.x, p1.position.y);

ctx.lineTo(p2.position.x, p2.position.y);

ctx.stroke();

}

function drawParticle(p) {

ctx.beginPath();

ctx.fillStyle = p.color;

ctx.arc(p.position.x, p.position.y, p.radius, 0, Math.PI * 2);

ctx.fill();

}

function getRandomInt(min, max) {

return Math.floor(Math.random() * (max - min + 1)) + min;

}

function getRandomNumber(min, max) {

return Math.random() * (max - min + 1) + min;

}

function componentToHex(c) {

var hex = c.toString(16);

return hex.length == 1 ? "0" + hex : hex;

}

function rgbToHex(r, g, b) {

return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);

}

//-------- PROTOTYPES --------

//POINT

function Point(x, y, z) {

this.x = (x == null) ? 0 : x;

this.y = (y == null) ? 0 : y;

this.z = (z == null) ? 0 : z;

}

Point.prototype.distance = function(p2) {

//Euclidean Disctance

return Math.sqrt(Math.pow(this.x - p2.x, 2) + Math.pow(this.y - p2.y, 2) + Math.pow(this.z - p2.z, 2));

}

Point.prototype.manhatan = function(p2) {

return (p2.x - p1.x) + (p2.y - p1.y) + (p2.z - p1.z);

}

Point.prototype.clone = function() {

return new Point(this.x, this.y, this.z);

}

//VECTOR

function Vector(p1, p2, color) {

this.p1 = (p1 == null) ? (new Point()) : p1;

this.p2 = (p2 == null) ? (new Point()) : p2;

this.color = (color == null) ? "#000" : color;

this.origin = new Point();

}

Vector.prototype.norm = function() {

return this.p1.distance(this.p2);

}

Vector.prototype.component = function(axis) {

switch (axis.toUpperCase()) {

case "X":

return this.p2.x - this.p1.x;

break;

case "Y":

return this.p2.y - this.p1.y;

break;

case "Z":

return this.p2.z - this.p1.z;

break;

}

}

Vector.prototype.toPoint = function(p) {

if (p == null) p = new Point();

var d0x = this.p1.x - p.x;

var d0y = this.p1.y - p.y;

var d0z = this.p1.z - p.z;

var p1n = new Point(this.p1.x - d0x, this.p1.y - d0y, this.p1.z - d0z);

var p2n = new Point(this.p2.x - d0x, this.p2.y - d0y, this.p2.z - d0z);

return new Vector(p1n, p2n);

}

Vector.prototype.toOrigin = function() {

return this.toPoint(this.origin);

}

Vector.prototype.add = function(v2) {

var v1c = this.toOrigin();

var v2c = v2.toPoint(v1c.p2);

var v = new Vector(v1c.p1, new Point(v1c.p1.x + v2c.p2.x, v1c.p1.y + v2c.p2.y, v1c.p1.z + v2c.p2.z));

return v.toPoint(this.p1);

}

Vector.prototype.sub = function(v2) {

var v1c = this.toOrigin();

var v2c = v2.toOrigin();

var vx = v1c.p2.x - v2c.p2.x;

var vy = v1c.p2.y - v2c.p2.y;

var vz = v1c.p2.z - v2c.p2.z;

var v = new Vector(v1c.p1, new Point(vx, vy, vz));

return v.toPoint(this.p1);

}

Vector.prototype.dot = function(v2) {

var v1c = this.toOrigin();

var v2c = v2.toOrigin();

return v1c.p2.x * v2c.p2.x + v1c.p2.y * v2c.p2.y + v1c.p2.z * v2c.p2.z;

}

Vector.prototype.cross = function(v2) {

var v1c = this.toOrigin();

var v2c = v2.toOrigin();

var vx = v1c.p2.y * v2c.p2.z - v1c.p2.z * v2c.p2.y;

var vy = v1c.p2.z * v2c.p2.x - v1c.p2.x * v2c.p2.z;

var vz = v1c.p2.x * v2c.p2.y - v1c.p2.y * v2c.p2.x;

var v = new Vector(v1c.p1, new Point(vx, vy, vz));

return v.toPoint(this.p1);

}

Vector.prototype.angleBetween = function(v2) {

var v1c = this.toOrigin();

var v2c = v2.toOrigin();

return Math.acos(v1c.dot(v2c) / (v1c.norm() * v2c.norm()));

}

Vector.prototype.unit = function() {

var v1c = this.toOrigin();

var norm = v1c.norm();

var v = new Vector(v1c.p1, new Point(v1c.p2.x / norm, v1c.p2.y / norm, v1c.p2.z / norm));

return v.toPoint(this.p1);

}

Vector.prototype.zero = function() {

return new Vector();

}

Vector.prototype.inverse = function(axis) {

if (axis == null)

return new Vector(this.p2, this.p1);

else {

var v1c = this.toOrigin();

var v = new Vector();

switch (axis.toUpperCase()) {

case "X":

v = new Vector(new Point(), new Point(-v1c.p2.x, v1c.p2.y, v1c.p2.z));

break;

case "Y":

v = new Vector(new Point(), new Point(v1c.p2.x, -v1c.p2.y, v1c.p2.z));

break;

case "Z":

v = new Vector(new Point(), new Point(v1c.p2.x, v1c.p2.y, -v1c.p2.z));

break;

}

return v.toPoint(this.p1);

}

}

//PARTICLE

function Particle(color, radius, position, velocity, acceleration) {

this.position = (position == null) ? (new Point()) : position;

this.initPos = (position == null) ? (new Point()) : position;

this.vel = (velocity == null) ? (new Vector()) : velocity;

this.acceleration = (acceleration == null) ? (new Vector()) : acceleration;

this.color = (color == null) ? "#000" : color;

this.radius = (radius == null) ? 2 : radius;

this.time = 0;

}

Particle.prototype.distance = function(t) {

//s = s0 + v0t + at2/2

var sx = this.initPos.x + this.vel.component("x") * t + (this.acceleration.component("x") * Math.pow(t, 2)) / 2;

var sy = this.initPos.y + this.vel.component("y") * t + (this.acceleration.component("y") * Math.pow(t, 2)) / 2;

var sz = this.initPos.z + this.vel.component("z") * t + (this.acceleration.component("z") * Math.pow(t, 2)) / 2;

return new Point(sx, sy, sz);

}

Particle.prototype.velocity = function(t) {

//v = v0 + at

var vx = this.vel.component("x") + this.acceleration.component("x") * t;

var vy = this.vel.component("y") + this.acceleration.component("y") * t;

var vz = this.vel.component("z") + this.acceleration.component("z") * t;

return new Vector(new Point(), new Point(vx, vy, vz));

}

總結

以上是生活随笔為你收集整理的html5实现圆圈里带一个三角形,HTML5 Canvas圆圈里面的三角形变换动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。