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);

  .........完整代码请登录后点击上方下载按钮下载查看