canvas扇形背景

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

let canvas;
let ctx;
let w, h;

function setup() {
  canvas = document.querySelector("#canvas");
  ctx = canvas.getContext("2d");
  resize();
  window.addEventListener("resize", () => {
    resize();
    draw();
  });
  canvas.addEventListener("click", draw);
}

function resize() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
}

function drawCircles(x, y, r, angle) {
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(angle);
  ctx.beginPath();
  ctx.arc(0, 0, r, 0, Math.PI, true);
  ctx.arc(-r, r, r, Math.PI / 2 * 3, 0, false);
  ctx.arc(r, r, r, Math.PI, Math.PI / 2 * 3, false);
  ctx.stroke();
  ctx.clip();
  
  let circles = 12;
  for(let i = 0; i < circles; i++) {
    ctx.beginPath();
    let f = i / circles;
    ctx.arc(0, r - f * r, r * f, 0, Math.PI * 2, true);
    ctx.stroke();
  }
  
  ctx.restore();
}

function draw() {
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, w, h);
  drawPattern();
}

setup();
draw();

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