canvas背景绘制马赛克边框效果代码-html代码-BFW代码库

canvas背景绘制马赛克边框效果代码

代码语言：html

所属分类：背景

代码描述：canvas背景绘制马赛克边框效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
<style>
html {
  height: 100%;
}

body {
  background-image: url(//repo.bfw.wiki/bfwrepo/image/5d65399a14ba1.png);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  height: 100%;
}
</style>


</head>

<body>
  

  
      <script >
function applyBorder({ element, color = '#849db8', scale = 12 }) {
  const canvas = document.createElement('canvas'),
  context = canvas.getContext('2d'),
  e = element;

  let width = canvas.width = e.offsetWidth,
  height = canvas.height = e.offsetHeight;

  e.appendChild(canvas);

  function drawLine(startX, startY, length, orientation, step) {
    let last = [1, 0, 1, 0, 1];
    //let x = step
    //if(step >= max) return//x = step - Math.floor(step / max) * max
    let nextFlip = Math.floor(Math.random() * 3),
    lastFlip = 0,
    side = Math.round(Math.random()) == 1 ? true : false,
    max = Math.floor(length / scale);

    context.fillStyle = color;
    if (step) max = 1;

    for (var x = 0; x < max; x++) {
      if (step) x = step;
      let g = [1, 0, 1, 0, 1];

      if (x == nextFlip) {
        lastFlip = nextFlip;
        nextFlip += Math.round(Math.random() * 6) + 2;
        g[side ? 1 : 3] = 0;
        g[side ? 3 : 1] = 1;
        side = !side;
      } else if (x == nextFlip - 1) {
        g[2] = 0;
      } else if (x == lastFlip + 1) {
        g[side ? 0 : 4] = 0;
        g[side ? 4 : 0] = 1;
      }

      if (x == 0 || x == max) {
        g.........完整代码请登录后点击上方下载按钮下载查看