WebfExample

canvas-2d.js

document.body.style.background = 'black'

const width = 200
const height = 200

const canvas = document.createElement('canvas')
canvas.width = width
canvas.height = height
canvas.style.height = `${height}px`
canvas.style.width = `${width}px`

document.body.appendChild(canvas)

const fps = document.createElement('input')
const mspf = document.createElement('input')
const ang = document.createElement('input')

for (const element of [fps, mspf, ang]) {
  document.body.appendChild(element)
}

const ctx = canvas.getContext('2d')
// const {width,height}=ctx.canvas
const{sin,cos,PI}=Math,TAU=PI*2,PI_=PI/2,b=PI/3,t=0x01000000;
function line(x0,y0,x1,y1){
  ctx.beginPath();
  if (typeof x0 === 'number' && typeof y0 === 'number') {
    ctx.moveTo(x0,y0);
  }
  ctx.lineTo(x1,y1);
  ctx.stroke();
}
const xOff=[],yOff=[],oX=[],oY=[],nX=[],nY=[];
for(var i=0;i<3;i++){
  xOff[i]=cos(i*b);
  yOff[i]=sin(i*b);
}
var then=0,a=0,oldX=NaN,oldY=NaN,newX=NaN,newY=NaN;
function frame(now){
  const w=width/2,h=height/2,
  w_=w/2,h_=h/2,
  time=now-then;
  fps.value=1000/(mspf.value=time);then=now;
  ang.value=a+=PI/180;
  //ang.value=a+=0.01;
  //a%=TAU;
  //ang.value=a=now*PI/1000%TAU;
  ctx.save();
  ctx.translate(w,h);

  // const img=ctx.getImageData(0,0,width,height),data=new Uint32Array(img.data.buffer);
  // for(const i in data)if(data[i]>t)data[i]-=t;
  // ctx.putImageData(img,0,0);

  ctx.strokeStyle=`hsl(${a}rad,100%,50%)`;
  ctx.lineWidth=w / 25;
  for(var i=0;i<3;i++){
    oX[i]=nX[i];nX[i]=(cos(a+i*b)+xOff[i])*w_;
    oY[i]=nY[i];nY[i]=(sin(a+i*b)+yOff[i])*h_;
    line(oX[i],oY[i],nX[i],nY[i]);
    line(-oX[i],-oY[i],-nX[i],-nY[i]);
  }
  oldX=newX;newX=cos(a+PI_)*w_;
  oldY=newY;newY=sin(a+PI_)*h_;
  line(oldX,oldY,newX,newY);
  line(-oldX,-oldY,-newX,-newY);
  line(oldX*2,-oldY*2,newX*2,-newY*2);
  line(-oldX*2,oldY*2,-newX*2,newY*2);

  ctx.restore();
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);