html5实现圆圈里带一个三角形,HTML5 Canvas圆圈里面的三角形变换动画

最新推荐文章于 2024-03-27 12:00:23 发布
最新推荐文章于 2024-03-27 12:00:23 发布
阅读量313 收藏
点赞数
文章标签： html5实现圆圈里带一个三角形

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));

}

weixin_39806388
关注
HTML5画布（canvas）绘制三角形，矩形，圆形
yangaoyuan1999的博客
09-29 9435
canvas标签： <canvas id="cavsElem" width="400" height="300">您的浏览器不支持canvas</canvas> 1.定义id属性是为了在JavaScript代码中引用元素 2.标签中间的文字在浏览器不支持canvas的情况下才会显示 3.canvas标签与img标签一样，有两个原生属性width和height 默认300*500像素 4.不要用css控制它的宽和高，否则可能会引起画布上的图形变形 要在画布中绘
h5画三角形_<html5>围绕圆圈画三角形
weixin_30571837的博客
01-12 489
我想要点击retacgle，在圆圈周围绘制一个三角形。围绕圆圈画三角形源代码是这样的...但是，三角并不好每个位置..怎样绘制周围像附加的图像圆三角形...........ost = 30515;oen = 31570;//ost = 74147;//oen = 75664;color="255,0,0";av = (ost+oen) /2 ;x1 = centerX-radius*Math.si...
html圆和三角形
最新发布
qq_52869391的博客
03-27 141
【代码】html圆和三角形。
html5实现圆圈里带一个三角形,html中的倒三角形
weixin_34867001的博客
05-31 868
种类：单击下拉选项设置事件节点的种类，可设置为时间型、类目型、数值型。 节点形状：单击下拉选项设置节点形状，可设置为菱形、圆、三角形(上)、三角形(下)、方形、叉。 节点大小：输入数值或单击设置节点大小。 默认样式：设置节点的默认样式，包括节点填充色、节点边框色、节点边框粗细。 选Enumeration，弱团)是一种重叠社区发现的算法，在社交网络中是一个很重要的研究。所谓的弱团挖掘，即利用检测到的...
html5利用canvas绘制各种基本图形工具.rar
08-27
用html5实现的简单在线画图工具，包括以下几个部分： 图像 单独的按钮组 保存图片、清除画布 操作组(所有按钮中只能选取一个) 工具(画笔、橡皮、油漆桶、吸管、文字、放大) 形状(画线、画圆圈、画方框、画三角形、画...
仪表盘进度条HTML5特效
07-24
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，无需依赖任何外部插件。仪表盘进度条HTML5特效利用了Canvas的这一特性，创建出可自定义的、视觉效果丰富的进度条组件。这种组件常...
html5基础入门教程之canvas运用样式与颜色
前端基础入门学习线路
02-17 3011
在canvas绘制图形中介绍了fill和stroke方法用于填充和勾勒图形。下面总结canvas全部样式与颜色的可选项，用以绘制更吸引人的内容。 色彩 在前面介绍的canvas的相关知识中，只有用来绘制内容的方法。如果像要给绘制的内容上色，则要用到fillStyle和strokeStyle。语法如下： fillStyle=color; strokeStyle=color; fillSty...
HTML5 Canvas画简单图形
AlienTech for better life!~
05-04 2072
最近开始重新拾起HTML5的东西，这里把简单的图形的画法总结一下（参考韩顺平老师的视频，讲的很不错） HTML5 Canvas 测试 HTML5 Canvas //1.得到画布 var canvas1 = document.getElementById("can1"); //2.得到上下文引用，可以理解为画笔 var context = canvas1
Canvas实现动态绘制圆周效果|实现奥运五环
李桥桉的博客
04-22 2060
一、canvas简介是一个h5新增的标签 表示画布 是一个不需要其他三方操作 原生的必须通过js来对其画布进行构图 canvas本身是一个容器 js是一个画笔canvas有两个重要的属性 width heightcanvas应用很多 验证码 图表操作 截屏 手写板 (签合同)。。。
HTML5 Canvas科技感三角形二维动画特效
06-11
HTML5 Canvas科技感三角形二维动画特效，蓝色科技感十足的网页背景动画效果。
canvas快速绘制圆形、三角形、矩形、多边形
weixin_30947043的博客
12-29 231
想看前面整理的canvas常用API的同学可以点下面： canvas学习之API整理笔记（一） canvas学习之API整理笔记（二） 本系列文章涉及的所有代码都将上传至：项目代码github地址，喜欢的同学们欢迎点Star～ 从本篇文章开始，我会分享给大家canvas绘制的各种基础图形和酷炫的图形，注意：是一系列！欢迎关注！ 后续每篇文章我会着重分享给大家一些使用Canvas开发的实例...
webGL创建旋转动画三角形
孜蓝的博客
11-17 293
test.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>WebGL Demo</title> <link rel="stylesheet" href="./webgl.css" type="text/css"> <script src="https://cdnjs.cloudfla
【前端】怎么用border做出一个三角形和圆
dcd15418的博客
02-26 227
1、一个有宽度和有高度和边框的div块 div{ width:100px; height:100px; border:10px solid red; } 　　在网页显示的效果： 2、div块没有了高度和宽度 div{ width:0px; heig...
CSS 绘制三角形原理演示（动画）
weixin_34416754的博客
06-09 266
2019独角兽企业重金招聘Python工程师标准>>> ...
css实现六角星
qq_39039128的博客
09-23 1333
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
html5实现圆圈里带一个三角形,CSS制作箭头图标代码(圆，三角形，椭圆)c
weixin_36371504的博客
05-31 958
看到一些网站的椭圆边框是用css样式写出来得，请问怎样写？首先打开sublime text编辑器，新建一个html文件，里面写入一个p标签：怎么把DIV做成椭圆形，CSS，最好有代码参见下面样式代码： #oval{ width:200px; height:100px; background:green; border-radius:100px / 50px; }按钮边框椭圆效果，不用图片，用css...
html5实现圆圈里带一个三角形,CSS3 画基本图形，圆形、椭圆形、三角形等
weixin_35851515的博客
05-31 913
CSS3 画基本图形，圆形、椭圆形、三角形等发布时间：2016-09-20 16:25:53 作者：佚名 我要评论这篇文章主要介绍了CSS3 画基本图形，圆形、椭圆形、三角形等的相关资料,需要的朋友可以参考下CSS3 圆形#css3-circle{width: 150px;height: 150px;border-radius: 50%;background-color: #232323...
前端小技巧：边框写三角形
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
09-26 306
来源：开课吧前端团队https://mp.weixin.qq.com/s/8vcrfzh5J5aSRGSPRwFASQ边框写三角形，这个技能从事前端的小伙伴应该都不陌生，不过大多数都是...
HTML5 Canvas实现立体三角形背景动画特效
总结来说，"彩色三角形图案Canvas特效"不仅是一个视觉吸引的背景特效，也是对HTML5 Canvas技术运用的一个典型示例，展示了如何利用Canvas API来实现复杂图形的绘制和动画效果，这对于前端开发者来说是一个很好的学习...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值