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.........完整代码请登录后点击上方下载按钮下载查看