canvas圆模式

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

"use strict"; // Paul Slaymaker, paul25882@gmail.com
const body=document.getElementsByTagName("body").item(0);
body.style.background="black";
body.style.margin=0;
const TP=2*Math.PI;
var CSIZEX=600;
var CSIZEY=600;

var createContext=()=>{
  let c=document.createElement("canvas");
  c.width=2*CSIZEX;
  c.height=2*CSIZEY;
  c.style.position="absolute";
  c.style.top="0px";
  c.style.left="0px";
  let context=c.getContext("2d");
  return context;
}
const ctx=createContext();
const ctx2=createContext();

var container=(()=>{
  let co=document.createElement("div");
  co.append(ctx2.canvas);
  co.append(ctx.canvas);
  body.append(co);
  return co;
})();

onresize=function() {
  CSIZEX=Math.round(window.innerWidth/2)-4;
  CSIZEY=Math.round(window.innerHeight/2)-4;
  ctx.canvas.width=2*CSIZEX;
  ctx.canvas.height=2*CSIZEY;
  ctx.translate(CSIZEX,CSIZEY);
  ctx2.canvas.width=2*CSIZEX;
  ctx2.canvas.height=2*CSIZEY;
  ctx2.translate(CSIZEX,CSIZEY);
  setPoints();
  setColors();
  idx=0;
  ctx.lineWidth=3;
  ctx.fillStyle="red";
}

var getRandomInt=(min,max,low)=>{
  if (low) {
    return Math.floor(Math.random()*Math.random()*(max-min))+min;
  } else {
    return Math.floor(Math.random()*(max-min))+min;
  }
}

function Point(x,y,d,n,r) {
  this.x=x;
  this.y=y;
  this.d=d;
  this.n=n;
  this.r=r;
}

var points=[];

var pExist=(p)=>{
  for (let i=0; i<points.length; i++) {
    if (Math.abs(p.x-points[i].x)<0.001 && Math.abs(p.y-points[i].y)<0.001) return true;
  }
  return false;
}

var di=[];

var setPoints=()=>{
  randomizeDistances();
  points=[new Point(0,0,0,0,di[0])];
  addPoints(points[0]);
}

var colors=[];
var mcolor="yellow";
var dcolor="black";
var dcolor2="black";

var setColors=()=>{
  for (let i=0; i<4; i++) {
    colors[i]=["hsl("+getRandomInt(0,360)+",90%,60%)"];
  }
  mcolor="hsl("+getRandomInt(0,360)+",100%,50%)";
  dcolor=["#000","#122","#244","#333"][getRandomInt(0,4)];
  dcolor="hsl(0,0%,"+getRandomInt(0,30,true)+"%)";
  dcolor2="hsl(0,0%,"+getRandomInt(0,30,true)+"%)";
}

var drawZ=(i)=>{
  let dp=new Path2D();
  let dpc=new Path2D();
//  ctx.beginPath();
  dp.moveTo(points[i].x+points[i].r,points[i].y);
  dp.arc(points[i].x,points[i].y,points[i].r,0,TP);
  dpc.moveTo(points[i].x+points[i].r-8,points[i].y);
  dpc.arc(points[i].x,points[i].y,points[i].r-8,0,TP);
  ctx2.lineWidth=20;
  ctx2.strokeStyle=mcolor;
  ctx2.stroke(dp);
  ctx.lineWidth=12;
  ctx.strokeStyle=dcolor;
  ctx.stroke(dp);

ctx.strokeStyle=colors[points[i].n];
    ctx.lineWidth=4;
    ctx.stroke(dpc);
  if (points[i].r>38) {
    ctx.beginPath();
    ctx.moveTo(points[i].x+points[i].r-26,points[i].y);
    ctx.arc(points[i].x,points[i].y,points[i].r-26,0,TP);
    ctx.strokeStyle=colors[(points[i].n+1)%4];
    ctx.stroke();
  }
  if (points[i].r>58) {
    ctx.beginPath();
    ctx.moveTo(points[i].x+points[i].r-44,points[i].y);
    ctx.arc(points[i].x,points[i].y,points[i].r-44,0,TP);
    ctx.strokeStyle=colors[(points[i].n+2)%4];
    ctx.lineWidth=5;
    ctx.stroke();
  }
  if (points[i].r>68) {
    ctx.beginPath();
    ctx.arc(points[i].x,points[i].y,points[i].r-55,0,TP);
    ctx.strokeStyle=dcolor2;
    ctx.lineWidth=18;
    ctx.stroke();
    ctx.lineWidth=4;
    ctx.beginPath();
    ctx.arc(points[i].x,points[i].y,points[i].r-64,0,TP);
    ctx.strokeStyle=colors[(points[i].n+3)%4];
    ctx.stroke();
  }
}

onresize();
start();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg