canvas输入随意字符线条化效果代码-html代码-BFW代码库

canvas输入随意字符线条化效果代码

代码语言：html

所属分类：其他

代码描述：canvas输入随意字符线条化效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    @import url("https://fonts.googleapis.com/css?family=Titillium+Web:900&display=swap");
* {
  margin: 0;
}

body {
  background: #000;
  color: white;
  font-family: Arial, sans;
  text-align: center;
}

.wrapper {
  margin: 0 auto;
  width: 500px;
}

.loadFont {
  font-family: "Titillium Web";
}

canvas {
  filter: blur(5px) contrast(12);
  height: 500px;
  width: 500px;
}

input[type=text] {
  margin: 5px 10px;
  text-align: center;
  width: 50px;
}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<div class="wrapper">
        <canvas class="stage" width=500 height=500></canvas>
        <p class="loadFont">loading font...</p>
        <input class="userCharacter" type="text"></input> <label for="userCharacter">Enter a character</label>
</div>
<!-- partial -->
  <script  >
      let canvas = document.querySelector('.stage'),
        inputField = document.querySelector('.userCharacter'),
        width = canvas.width,
        height = canvas.height,
        linearRows = 30,
        gutter = 8,
        dotColour = '#00ff41',
        repaintColour = 'rgba(0,0,0, 0.2)',
        matteLookup = [],
        maxSpeed = .1,
        maxSize = 8,
        systemSize = 1500,
        matteCharacter = '♥', // ♠♣♥♦♫☺☻
        running = false,
        ctx = canvas.getContext('2d');

function createTextMatte(){
        // clear the screen
        ctx.clearRect(0, 0, width, height);
        /* Draw somethin.........完整代码请登录后点击上方下载按钮下载查看