html特效代码
-
2023年2月11日发(作者：离合器的组成)【HTML+CSS+JS花环特效——附源代码】
⽬录
效果
代码
SpinnerThingy
body,html{
margin:0;
}
canvas{
display:block;
}
/*
JohanKarlsson
/DonKarlssonSan/vectory
*/
"usestrict";
classVector{
constructor(x,y){
this.x=x;
this.y=y;
}
add(v){
returnnewVector(
this.x+v.x,
this.y+v.y);
}
addTo(v){
this.x+=v.x;
this.y+=v.y;
}
sub(v){
returnnewVector(
this.x-v.x,
this.y-v.y);
}
subFrom(v){
this.x-=v.x;
this.y-=v.y;
}
mult(n){
returnnewVector(this.x*n,this.y*n);
}
multTo(n){
this.x*=n;
this.y*=n;
returnthis;
}
div(n){
returnnewVector(this.x/n,this.y/n);
}
setAngle(angle){
varlength=gth();
this.x=(angle)*length;
this.y=(angle)*length;
}
setLength(length){
varangle=le();
this.x=(angle)*length;
this.y=(angle)*length;
}
getAngle(){
2(this.y,this.x);
}
getLength(){
(this.x*this.x+this.y*this.y);
}
getLengthSq(){
returnthis.x*this.x+this.y*this.y;
}
distanceTo(v){
(v).getLength();
}
copy(){
returnnewVector(this.x,this.y);
}
equals(v){
returnthis.x==v.x&&this.y==v.y;
}
}
/*
JohanKarlsson,2019
/DonKarlssonSan
MITLicense,seeDetailsView
*/
letcanvas;
letctx;
letw,h;
letsize;
letcircles;
classCircle{
classCircle{
constructor(r){
this.r=r;
letnrOfPoints=24;
=[];
for(letcirclePoint=0;circlePoint letangle=*2/nrOfPoints*circlePoint; letx=(angle)*r; lety=(angle)*r; (newVector(x,y)); } } move(){ letdeltaAngle=0.05*this.r/size; h(p=>{ ///wiki/Rotation_matrix //