html5实现圆圈里带一个三角形,HTML5 Canvas圆圈里面的三角形变换动画
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圆圈里面的三角形变换动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 鸿蒙系统gpl,华为鸿蒙最大的对手现身！
- 下一篇： html鼠标长按事件,JavaScrip