canvas绘制圆形背景

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');

// let a = [];
// for (let i = 0; i < 100; i++) {
//   a.push(Math.floor(Math.random() * 255));
// }

// console.log(a.toString());

let data = [179,80,16,226,128,226,247,191,154,95,121,217,193,214,181,46,213,234,213,227,152,83,95,221,91,27,215,56,133,65,107,21,130,68,222,52,243,232,43,105,51,44,158,219,164,247,247,30,238,87,152,4,83,5,102,16,121,139,202,169,2,140,61,110,128,119,45,141,21,14,131,147,78,67,161,232,88,235,233,20,34,169,84,200,75,87,104,31,167,167,237,62,60,75,121,230,28,100,32,16];

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const numW = 10;
const numH = 10;
const boxW = Math.ceil(canvas.width / numW) * 2;
const boxH = Math.ceil(canvas.height / numH);
const colorWidth = 10;
const colorOffset = 118;

context.fillStyle = '#000000';
context.fillRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < data.length; i++) {
  const itemX = (i % numW) * boxW;
  const itemY = Math.floor(i / numH) * boxH;
  let itemW = boxW * ((data[i] % 6 + 1) / 7);
  let loops = 0;
  
  while (itemW > 20) {
    itemW -= 20;
    loops++;
    context.beginPath();
    context.arc(itemX, itemY, itemW, 0, Math.PI * 2);
    context.rect(itemX - itemW, itemY, itemW, 1000)
    context.fill();
    context.closePath();
    if (data[i] < 100) {
      context.strokeStyle = `hsl(${Math.floor(data[i - 1] / colorWidth + colorOffset + loops * 6)}, 100%, 50%)`;
    } else {
      context.strokeStyle = `hsl(${Math.floor(data[i - 1] / colorWidth - 20 + loops * 5)}, 100%, 50%)`;
    }
    context.lineWidth = data[i] / 10 + 1;
    context.stroke();
    context.fill();
  }
  
  
  
}

const image = canvas.toDataURL("image/png");
document.write('<img src="'+image+'"/>');

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