首页 > 其他分享 >js mouse_go_canvas特效

js mouse_go_canvas特效

时间:2023-01-23 10:56:08浏览次数:38  
标签:canvas target segm length go mouse Math

只需要js代码就行,避免id重复

/**
 * id: mouse_go_canvas
 */

const fillColor = "#7400a1"	

const mouse_go_canvas = document.createElement("canvas")
mouse_go_canvas.setAttribute("id","mouse_go_canvas")
document.querySelector("body").appendChild(mouse_go_canvas)

function init(elemid) {
	let canvas = document.getElementById(elemid),
		c = canvas.getContext("2d"),
		w = (canvas.width = window.innerWidth),
		h = (canvas.height = window.innerHeight);
	return {
		c: c,
		canvas: canvas
	};
}

class segm {
	constructor(x, y, l) {
		this.b = Math.random() * 1.9 + 0.1;
		this.x0 = x;
		this.y0 = y;
		this.a = Math.random() * 2 * Math.PI;
		this.x1 = this.x0 + l * Math.cos(this.a);
		this.y1 = this.y0 + l * Math.sin(this.a);
		this.l = l;
	}
	update(x, y) {
		this.x0 = x;
		this.y0 = y;
		this.a = Math.atan2(this.y1 - this.y0, this.x1 - this.x0);
		this.x1 = this.x0 + this.l * Math.cos(this.a);
		this.y1 = this.y0 + this.l * Math.sin(this.a);
	}
}

class rope {
	constructor(tx, ty, l, b, slq, typ) {
		if (typ == "l") {
			this.res = l / 2;
		} else {
			this.res = l / slq;
		}
		this.type = typ;
		this.l = l;
		this.segm = [];
		this.segm.push(new segm(tx, ty, this.l / this.res));
		for (let i = 1; i < this.res; i++) {
			this.segm.push(
				new segm(this.segm[i - 1].x1, this.segm[i - 1].y1, this.l / this.res)
			);
		}
		this.b = b;
	}
	update(t) {
		this.segm[0].update(t.x, t.y);
		for (let i = 1; i < this.res; i++) {
			this.segm[i].update(this.segm[i - 1].x1, this.segm[i - 1].y1);
		}
	}
	show() {
		if (this.type == "l") {
			c.beginPath();
			for (let i = 0; i < this.segm.length; i++) {
				c.lineTo(this.segm[i].x0, this.segm[i].y0);
			}
			c.lineTo(
				this.segm[this.segm.length - 1].x1,
				this.segm[this.segm.length - 1].y1
			);
			c.strokeStyle = fillColor;
			c.lineWidth = this.b;
			c.stroke();

			c.beginPath();
			c.arc(this.segm[0].x0, this.segm[0].y0, 1, 0, 2 * Math.PI);
			c.fillStyle = fillColor;
			c.fill();

			c.beginPath();
			c.arc(
				this.segm[this.segm.length - 1].x1,
				this.segm[this.segm.length - 1].y1,
				2,
				0,
				2 * Math.PI
			);
			c.fillStyle = fillColor;
			c.fill();
		} else {
			for (let i = 0; i < this.segm.length; i++) {
				c.beginPath();
				c.arc(this.segm[i].x0, this.segm[i].y0, this.segm[i].b, 0, 2 * Math.PI);
				c.fillStyle = fillColor;
				c.fill();
			}
			c.beginPath();
			c.arc(
				this.segm[this.segm.length - 1].x1,
				this.segm[this.segm.length - 1].y1,
				2, 0, 2 * Math.PI
			);
			c.fillStyle = fillColor;
			c.fill();
		}
	}
}

//setting up canvas
let resObj = init("mouse_go_canvas");
let c = resObj.c,
	canvas = resObj.canvas,
	w = (canvas.width = window.innerWidth),
	h = (canvas.height = window.innerHeight),
	ropes = [];

//variables definition
let nameOfVariable = "value",
	mouse = {},
	last_mouse = {},
	rl = 50,
	randl = [],
	target = {
		x: w / 2,
		y: h / 2
	},
	last_target = {},
	t = 0,
	q = 10,
	da = [],
	type = "l";

for (let i = 0; i < 100; i++) {
	if (Math.random() > 0.25) {
		type = "l";
	} else {
		type = "o";
	}
	ropes.push(
		new rope(
			w / 2,
			h / 2,
			(Math.random() * 1 + 0.5) * 500,
			Math.random() * 0.4 + 0.1,
			Math.random() * 15 + 5,
			type
		)
	);
	randl.push(Math.random() * 2 - 1);
	da.push(0);
}

//place for objects in animation
function draw() {

	if (mouse.x) {
		target.errx = mouse.x - target.x;
		target.erry = mouse.y - target.y;
	} else {
		target.errx =
			w / 2 +
			(h / 2 - q) *
			Math.sqrt(2) *
			Math.cos(t) /
			(Math.pow(Math.sin(t), 2) + 1) -
			target.x;
		target.erry =
			h / 2 +
			(h / 2 - q) *
			Math.sqrt(2) *
			Math.cos(t) *
			Math.sin(t) /
			(Math.pow(Math.sin(t), 2) + 1) -
			target.y;
	}

	target.x += target.errx / 10;
	target.y += target.erry / 10;

	t += 0.01;

	for (let i = 0; i < ropes.length; i++) {
		if (randl[i] > 0) {
			da[i] += (1 - randl[i]) / 10;
		} else {
			da[i] += (-1 - randl[i]) / 10;
		}
		ropes[i].update({
			x: target.x +
				randl[i] * rl * Math.cos((i * 2 * Math.PI) / ropes.length + da[i]),
			y: target.y +
				randl[i] * rl * Math.sin((i * 2 * Math.PI) / ropes.length + da[i])
		});
		ropes[i].show();
	}
	last_target.x = target.x;
	last_target.y = target.y;
}

//mouse position
canvas.addEventListener(
	"mousemove",
	function(e) {
		last_mouse.x = mouse.x;
		last_mouse.y = mouse.y;

		mouse.x = e.pageX - this.offsetLeft;
		mouse.y = e.pageY - this.offsetTop;
	},
	false
);

canvas.addEventListener("mouseleave", function(e) {
	mouse.x = false;
	mouse.y = false;
});

//animation frame
function loop() {
	setTimeout(loop,100)
	c.clearRect(0, 0, w, h);
	draw();
}

//window resize
window.addEventListener("resize", function() {
	(w = canvas.width = window.innerWidth),
	(h = canvas.height = window.innerHeight);
	loop();
});

//animation runner
setInterval(loop(),1000/60);

标签:canvas,target,segm,length,go,mouse,Math
From: https://www.cnblogs.com/sqmw/p/17065042.html

相关文章

  • 【算法-计数排序和桶排序】Go语言实现
    计数排序新创建一个计数数组,size=Max遍历数组,值是索引。遍历计数数组,依次排列。funcCountSort(arr[]int){ count_arr:=make([]int,10) for_,value:=ra......
  • (18)go-micro微服务ELK介绍
    目录一什么是ELK二Beats的六种工具三ELK系统的特点四ELK+beats系统架构五ELK优点六最后一什么是ELKELK是三个[开源软件]的缩写,分别表示:Elasticsearch,Logstash,......
  • Three.js 进阶之旅:新春特典-Rabbit craft go
    声明:本文涉及图文和模型素材仅用于个人学习、研究和欣赏,请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。摘要兔年到了,祝大家身体健,康万事顺利。本文内......
  • go md5加密
    本文讲解如何使用go封装好的md5算法,不深入剖析md5算法原理。首先我们要知道md5算法属于hash算法的一种,所以在了解md5之前,我们先认识一下go提供的hash接口。hash算法是保证......
  • 【算法-堆排序】Go语言实现
    堆排序通过数组构造堆,根节点是最大的元素是大根堆,相反为小根堆主要有俩个方法,插入InsertHeap,调整堆:heapify对于排序来说:先把数组构造成一个大根堆,然后[0]依次......
  • 11 break、continue、goto
    #break、continue、gotopackagecom.zhan.base_2;publicclassTest11{publicstaticvoidmain(String[]args){//continue语句:跳出本次循环,直......
  • 归并排序和快速排序补充扩展-Go语言
    基于堆排序的算法题小和问题在一个数组中,每一个数左边比当前数小的数累加起来,叫做这个数组的小和。求一个数组的小和。就是在合并的时候,当左边数组的数小于右边数组的......
  • A. Everybody Likes Good Arrays!【Codeforces Round #845 (Div. 2) 】
    A.EverybodyLikesGoodArrays!原题链接Anarrayaisgoodifforallpairsofadjacentelements【相邻元素】,aiandai+1(1≤i<n)areofdifferentparity【奇......
  • go语言学习笔记【一】
    一、初入GO语言我们先还是看看GO语言的helloworld是怎么写的吧packagemainimport"fmt"funcmain(){fmt.Println("Helloworld!")}第一行:包声明,编写源文件时,必须......
  • sql base nodejs py go操作基本的db
    constmysql=require('mysql2');constconnection=mysql.createConnection({host:'localhost',user:'root',password:'root',database:'mybatis_pl......