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 something to use as matte
	And make it red, as we use that pixel colour value */
	ctx.fillStyle = '#f00';
	ctx.font = 650 +'px Titillium Web';
	ctx.textAlign = 'center';
	ctx.fillText(matteCharacter, width * .5, height - 32);
	// Capture and store all alpha values to array
	gatherPixelData();
	// clear the matte
	ctx.fillStyle = '#000';
	ctx.fillRect(0, 0, width, height);
	// start the animation
	if(!running){
		running = true;
		animate();
	}
}
function gatherPixelData(){
	matteLookup.length = 0;
	var imageData = ctx.getImageData(0, 0, width, height),
	pixelData = imageData.data;
	for (let loop = width * height, i = 0; i < loop * 4; i += 4){
		matteLookup.push((Math.round(pixelData[i])) / 255);
	}
}

let ParticleSystem = function(num){
	this.numParticles = num;
	this.allParticle.........完整代码请登录后点击上方下载按钮下载查看