html Canvas粒子文字特效

代码有点长,下面是代码:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>HTML5 Canvas粒子效果文字动画特效DEMO演示</title><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/style.css" media="screen" type="text/css" /></head><body>
<div style="text-align:center;clear:both;position:absolute;top:0;left:260px">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<canvas class="canvas"></canvas><div class="help">?</div> <div class="ui"><input class="ui-input" type="text" /><span class="ui-return">↵</span>
</div><div class="overlay"><div class="tabs"><div class="tabs-labels"><span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span class="tabs-label">Share</span></div><div class="tabs-panels"><ul class="tabs-panel commands"><li class="commands-item"><span class="commands-item-title">Text</span><span class="commands-item-info" data-demo="Hello :)">Type anything</span><span class="commands-item-action">Demo</span></li><li class="commands-item"><span class="commands-item-title">Countdown</span><span class="commands-item-info" data-demo="#countdown 10">#countdown<span class="commands-item-mode">number</span></span><span class="commands-item-action">Demo</span></li><li class="commands-item"><span class="commands-item-title">Time</span><span class="commands-item-info" data-demo="#time">#time</span><span class="commands-item-action">Demo</span></li><li class="commands-item"><span class="commands-item-title">Rectangle</span><span class="commands-item-info" data-demo="#rectangle 30x15">#rectangle<span class="commands-item-mode">width x height</span></span><span class="commands-item-action">Demo</span></li><li class="commands-item"><span class="commands-item-title">Circle</span><span class="commands-item-info" data-demo="#circle 25">#circle<span class="commands-item-mode">diameter</span></span><span class="commands-item-action">Demo</span></li><li class="commands-item commands-item--gap"><span class="commands-item-title">Animate</span><span class="commands-item-info" data-demo="The time is|#time|#countdown 3|#icon thumbs-up"><span class="commands-item-mode">command1</span>&nbsp;|<span class="commands-item-mode">command2</span></span><span class="commands-item-action">Demo</span></li></ul><div class="tabs-panel ui-details"><div class="ui-details-content"><h1>Shape Shifter</h1><p>An experiment by <a href="//www.kennethcachia.com" target="_blank">Kenneth Cachia<a/>.<br/><a href="//fortawesome.github.io/Font-Awesome/#icons-new" target="_blank">Font Awesome</a> is being used to render all #icons.</p><br/><p>Visit <a href="http://www.kennethcachia.com/shape-shifter/?a=#icon thumbs-up" target="_blank">Shape Shifter</a> to use icons.</p></div></div><div class="tabs-panel ui-share"><div class="ui-share-content"><h1>Sharing</h1><p>Simply add <em>?a=</em> to the current URL to share any static or animated text. Examples:</p><p><a href="http://www.kennethcachia.com/shape-shifter?a=Hello" target="_blank">www.kennethcachia.com/shape-shifter?a=Hello</a><br/><a href="http://www.kennethcachia.com/shape-shifter?a=Hello|#countdown 3" target="_blank">www.kennethcachia.com/shape-shifter?a=Hello|#countdown 3</a></p></div></div></div></div>
</div><script src="js/index.js"></script></body></html>

有两个css代码 

style.css代码:


body {font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;background: #79a8ae;color: #666;font-size: 16px;line-height: 1.5em;
}h1 {color: #111;margin: 0 0 12px 0;font-size: 24px;line-height: 1.5em;
}p {margin: 0 0 10x 0;
}a {color: #888;text-decoration: none;border-bottom: 1px solid #ccc;
}a:hover {border-bottom-color: #888;
}body,
.overlay {-webkit-perspective: 1000;-webkit-perspective-origin-y: 25%;
}.body--ready {/* Ideasbackground: -webkit-linear-gradient(top, #e2b986 -10%, #241c35 140%);background: -webkit-linear-gradient(top, #c97369 -40%, #241c35 130%);background: -webkit-linear-gradient(top, #fac4c4 -10%, #606386 140%);background: -webkit-linear-gradient(top, #519ab0 0%, #414A6D 110%);background: -webkit-linear-gradient(top, rgb(129, 0, 170) 0%, rgb(43, 4, 114) 110%);background: -webkit-linear-gradient(top, rgb(163, 235, 189) 0%, rgb(16, 93, 145) 110%);background: -webkit-linear-gradient(top, rgb(165, 103, 189) 0%, rgb(75, 233, 214) 120%);*/background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);background: -o-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);background: -ms-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);background: linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
}.body--ready .overlay {-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);-moz-transition: -moz-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);-ms-transition: -ms-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);-o-transition: -o-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);transition: transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);
}.ui {position: absolute;left: 50%;bottom: 5%;width: 300px;margin-left: -150px;
}.ui-input {width: 100%;height: 50px;background: none;font-size: 24px;font-weight: bold;color: #fff;text-align: center;border: none;border-bottom: 2px solid white;
}.ui-input:focus {outline: none;border: none;border-bottom: 2px solid white;
}.ui-return {display: none;position: absolute;top: 20px;right: 0;padding: 3px 2px 0 2px;font-size: 10px;line-height: 10px;color: #fff;border: 1px solid #fff;
}.ui--enter .ui-return {display: block;
}.ui--wide {width: 76%;margin-left: 12%;left: 0;
}.ui--wide .ui-return {right: -20px;
}.help {position: absolute;top: 40px;right: 40px;width: 25px;height: 25px;text-align: center;font-size: 13px;line-height: 27px;font-weight: bold;cursor: pointer;background: #fff;color: #79a8ae;opacity: .9;-webkit-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);-moz-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);-ms-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);-o-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
}.help:hover {opacity: 1;
}.overlay {position: absolute;top: 50%;left: 50%;width: 550px;height: 490px;margin: -260px 0 0 -275px;opacity: 0;-webkit-transform: rotateY(90deg);-moz-transform: rotateY(90deg);-ms-transform: rotateY(90deg);-o-transform: rotateY(90deg);transform: rotateY(90deg);
}.overlay--visible {opacity: 1;-webkit-transform: rotateY(0);-moz-transform: rotateY(0);-ms-transform: rotateY(0);-o-transform: rotateY(0);transform: rotateY(0);
}.ui-share,
.ui-details {opacity: .9;background: #fff;z-index: 2;
}.ui-details-content,
.ui-share-content {padding: 100px 50px;
}.commands {margin: 0;padding: 0;list-style: none;cursor: pointer;
}.commands-item {font-size: 12px;line-height: 22px;font-weight: bold;text-transform: uppercase;letter-spacing: 1px;padding: 20px;background: #fff;margin-top: 1px;color: #333;opacity: .9;-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);-moz-transition: -moz-transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1),opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);-ms-transition: -ms-transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1),opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);-o-transition: -o-transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1),opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);transition: transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1),opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
}.commands-item--gap {margin-top: 9px;
}.commands-item:hover {opacity: 1;
}.commands-item:hover .commands-item-action {background: #333;
}.commands-item a {display: inline-block;
}.commands-item-mode {display: inline-block;margin-left: 3px;font-style: italic;color: #ccc;
}.commands-item-title {display: inline-block;width: 150px;
}.commands-item-info {display: inline-block;width: 300px;font-size: 14px;text-transform: none;letter-spacing: 0;font-weight: normal;color: #aaa;
}.commands-item-action {display: inline-block;float: right;margin-top: 3px;text-transform: uppercase;font-size: 10px;line-height: 10px;color: #fff;background: #90c9d1;padding: 5px 10px 4px 10px;border-radius: 3px;
}.commands-item:first-child {margin-top: 0;
}.twitter-share {position: absolute;top: 4px;right: 20px;
}.tabs-labels {margin-bottom: 9px;
}.tabs-label {display: inline-block;background: #fff;padding: 10px 20px;font-size: 12px;line-height: 22px;font-weight: bold;text-transform: uppercase;letter-spacing: 1px;color: #333;opacity: .5;cursor: pointer;margin-right: 2px;-webkit-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);-moz-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);-ms-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);-o-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
}.tabs-label:hover {opacity: .9;
}.tabs-label--active {opacity: .9;
}.tabs-panel {display: none;
}.tabs-panel--active {display: block;
}.tab-panel {position: absolute;top: 0;left: 0;width: 100%;
}.touch .ui-input {display: none;
}

normalize.css 

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

js代码:


/*Shape Shifter=============A canvas experiment by Kenneth Cachiahttp://www.kennethcachia.comUpdated code------------https://github.com/kennethcachia/Shape-Shifter */var S = {init: function () {var action = window.location.href,i = action.indexOf('?a=');S.Drawing.init('.canvas');document.body.classList.add('body--ready');if (i !== -1) {S.UI.simulate(decodeURI(action).substring(i + 3));} else {S.UI.simulate('Shape|Shifter|Type|to start|#rectangle|#countdown 3||');}S.Drawing.loop(function () {S.Shape.render();});}
};S.Drawing = (function () {var canvas,context,renderFnrequestFrame = window.requestAnimationFrame       ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame    ||window.oRequestAnimationFrame      ||window.msRequestAnimationFrame     ||function(callback) {window.setTimeout(callback, 1000 / 60);};return {init: function (el) {canvas = document.querySelector(el);context = canvas.getContext('2d');this.adjustCanvas();window.addEventListener('resize', function (e) {S.Drawing.adjustCanvas();});},loop: function (fn) {renderFn = !renderFn ? fn : renderFn;this.clearFrame();renderFn();requestFrame.call(window, this.loop.bind(this));},adjustCanvas: function () {canvas.width = window.innerWidth;canvas.height = window.innerHeight;},clearFrame: function () {context.clearRect(0, 0, canvas.width, canvas.height);},getArea: function () {return { w: canvas.width, h: canvas.height };},drawCircle: function (p, c) {context.fillStyle = c.render();context.beginPath();context.arc(p.x, p.y, p.z, 0, 2 * Math.PI, true);context.closePath();context.fill();}}
}());S.UI = (function () {var input = document.querySelector('.ui-input'),ui = document.querySelector('.ui'),help = document.querySelector('.help'),commands = document.querySelector('.commands'),overlay = document.querySelector('.overlay'),canvas = document.querySelector('.canvas'),interval,isTouch = false, //('ontouchstart' in window || navigator.msMaxTouchPoints),currentAction,resizeTimer,time,maxShapeSize = 30,firstAction = true,sequence = [],cmd = '#';function formatTime(date) {var h = date.getHours(),m = date.getMinutes(),m = m < 10 ? '0' + m : m;return h + ':' + m;}function getValue(value) {return value && value.split(' ')[1];}function getAction(value) {value = value && value.split(' ')[0];return value && value[0] === cmd && value.substring(1);}function timedAction(fn, delay, max, reverse) {clearInterval(interval);currentAction = reverse ? max : 1;fn(currentAction);if (!max || (!reverse && currentAction < max) || (reverse && currentAction > 0)) {interval = setInterval(function () {currentAction = reverse ? currentAction - 1 : currentAction + 1;fn(currentAction);if ((!reverse && max && currentAction === max) || (reverse && currentAction === 0)) {clearInterval(interval);}}, delay);}}function reset(destroy) {clearInterval(interval);sequence = [];time = null;destroy && S.Shape.switchShape(S.ShapeBuilder.letter(''));}function performAction(value) {var action,value,current;overlay.classList.remove('overlay--visible');sequence = typeof(value) === 'object' ? value : sequence.concat(value.split('|'));input.value = '';checkInputWidth();timedAction(function (index) {current = sequence.shift();action = getAction(current);value = getValue(current);switch (action) {case 'countdown':value = parseInt(value) || 10;value = value > 0 ? value : 10;timedAction(function (index) {if (index === 0) {if (sequence.length === 0) {S.Shape.switchShape(S.ShapeBuilder.letter(''));} else {performAction(sequence);}} else {S.Shape.switchShape(S.ShapeBuilder.letter(index), true);}}, 1000, value, true);break;case 'rectangle':value = value && value.split('x');value = (value && value.length === 2) ? value : [maxShapeSize, maxShapeSize / 2];S.Shape.switchShape(S.ShapeBuilder.rectangle(Math.min(maxShapeSize, parseInt(value[0])), Math.min(maxShapeSize, parseInt(value[1]))));break;case 'circle':value = parseInt(value) || maxShapeSize;value = Math.min(value, maxShapeSize);S.Shape.switchShape(S.ShapeBuilder.circle(value));break;case 'time':var t = formatTime(new Date());if (sequence.length > 0) {S.Shape.switchShape(S.ShapeBuilder.letter(t));} else {timedAction(function () {t = formatTime(new Date());if (t !== time) {time = t;S.Shape.switchShape(S.ShapeBuilder.letter(time));}}, 1000);}break;default:S.Shape.switchShape(S.ShapeBuilder.letter(current[0] === cmd ? 'What?' : current));}}, 2000, sequence.length);}function checkInputWidth(e) {if (input.value.length > 18) {ui.classList.add('ui--wide');} else {ui.classList.remove('ui--wide');}if (firstAction && input.value.length > 0) {ui.classList.add('ui--enter');} else {ui.classList.remove('ui--enter');}}function bindEvents() {document.body.addEventListener('keydown', function (e) {input.focus();if (e.keyCode === 13) {firstAction = false;reset();performAction(input.value);}});input.addEventListener('input', checkInputWidth);input.addEventListener('change', checkInputWidth);input.addEventListener('focus', checkInputWidth);help.addEventListener('click', function (e) {overlay.classList.toggle('overlay--visible');overlay.classList.contains('overlay--visible') && reset(true);});commands.addEventListener('click', function (e) {var el,info,demo,tab,active,url;if (e.target.classList.contains('commands-item')) {el = e.target;} else {el = e.target.parentNode.classList.contains('commands-item') ? e.target.parentNode : e.target.parentNode.parentNode;}info = el && el.querySelector('.commands-item-info');demo = el && info.getAttribute('data-demo');url = el && info.getAttribute('data-url');if (info) {overlay.classList.remove('overlay--visible');if (demo) {input.value = demo;if (isTouch) {reset();performAction(input.value);} else {input.focus();}} else if (url) {//window.location = url;}}});canvas.addEventListener('click', function (e) {overlay.classList.remove('overlay--visible');});}function init() {bindEvents();input.focus();isTouch && document.body.classList.add('touch');}// Initinit();return {simulate: function (action) {performAction(action);}}
}());S.UI.Tabs = (function () {var tabs = document.querySelector('.tabs'),labels = document.querySelector('.tabs-labels'),triggers = document.querySelectorAll('.tabs-label'),panels = document.querySelectorAll('.tabs-panel');function activate(i) {triggers[i].classList.add('tabs-label--active');panels[i].classList.add('tabs-panel--active');}function bindEvents() {labels.addEventListener('click', function (e) {var el = e.target,index;if (el.classList.contains('tabs-label')) {for (var t = 0; t < triggers.length; t++) {triggers[t].classList.remove('tabs-label--active');panels[t].classList.remove('tabs-panel--active');if (el === triggers[t]) {index = t;}}activate(index);}});}function init() {activate(0);bindEvents();}// Initinit();
}());S.Point = function (args) {this.x = args.x;this.y = args.y;this.z = args.z;this.a = args.a;this.h = args.h;
};S.Color = function (r, g, b, a) {this.r = r;this.g = g;this.b = b;this.a = a;
};S.Color.prototype = {render: function () {return 'rgba(' + this.r + ',' +  + this.g + ',' + this.b + ',' + this.a + ')';}
};S.Dot = function (x, y) {this.p = new S.Point({x: x,y: y,z: 5,a: 1,h: 0});this.e = 0.07;this.s = true;this.c = new S.Color(255, 255, 255, this.p.a);this.t = this.clone();this.q = [];
};S.Dot.prototype = {clone: function () {return new S.Point({x: this.x,y: this.y,z: this.z,a: this.a,h: this.h});},_draw: function () {this.c.a = this.p.a;S.Drawing.drawCircle(this.p, this.c);},_moveTowards: function (n) {var details = this.distanceTo(n, true),dx = details[0],dy = details[1],d = details[2],e = this.e * d;if (this.p.h === -1) {this.p.x = n.x;this.p.y = n.y;return true;}if (d > 1) {this.p.x -= ((dx / d) * e);this.p.y -= ((dy / d) * e);} else {if (this.p.h > 0) {this.p.h--;} else {return true;}}return false;},_update: function () {if (this._moveTowards(this.t)) {var p = this.q.shift();if (p) {this.t.x = p.x || this.p.x;this.t.y = p.y || this.p.y;this.t.z = p.z || this.p.z;this.t.a = p.a || this.p.a;this.p.h = p.h || 0;} else {if (this.s) {this.p.x -= Math.sin(Math.random() * 3.142);this.p.y -= Math.sin(Math.random() * 3.142);} else {this.move(new S.Point({x: this.p.x + (Math.random() * 50) - 25,y: this.p.y + (Math.random() * 50) - 25,}));}}}d = this.p.a - this.t.a;this.p.a = Math.max(0.1, this.p.a - (d * 0.05));d = this.p.z - this.t.z;this.p.z = Math.max(1, this.p.z - (d * 0.05));},distanceTo: function (n, details) {var dx = this.p.x - n.x,dy = this.p.y - n.y,d = Math.sqrt(dx * dx + dy * dy);return details ? [dx, dy, d] : d;},move: function (p, avoidStatic) {if (!avoidStatic || (avoidStatic && this.distanceTo(p) > 1)) {this.q.push(p);}},render: function () {this._update();this._draw();}
}S.ShapeBuilder = (function () {var gap = 13,shapeCanvas = document.createElement('canvas'),shapeContext = shapeCanvas.getContext('2d'),fontSize = 500,fontFamily = 'Avenir, Helvetica Neue, Helvetica, Arial, sans-serif';function fit() {shapeCanvas.width = Math.floor(window.innerWidth / gap) * gap;shapeCanvas.height = Math.floor(window.innerHeight / gap) * gap;shapeContext.fillStyle = 'red';shapeContext.textBaseline = 'middle';shapeContext.textAlign = 'center';}function processCanvas() {var pixels = shapeContext.getImageData(0, 0, shapeCanvas.width, shapeCanvas.height).data;dots = [],pixels,x = 0,y = 0,fx = shapeCanvas.width,fy = shapeCanvas.height,w = 0,h = 0;for (var p = 0; p < pixels.length; p += (4 * gap)) {if (pixels[p + 3] > 0) {dots.push(new S.Point({x: x,y: y}));w = x > w ? x : w;h = y > h ? y : h;fx = x < fx ? x : fx;fy = y < fy ? y : fy;}x += gap;if (x >= shapeCanvas.width) {x = 0;y += gap;p += gap * 4 * shapeCanvas.width;}}return { dots: dots, w: w + fx, h: h + fy };}function setFontSize(s) {shapeContext.font = 'bold ' + s + 'px ' + fontFamily;}function isNumber(n) {return !isNaN(parseFloat(n)) && isFinite(n);}function init() {fit();window.addEventListener('resize', fit);}// Initinit();return {imageFile: function (url, callback) {var image = new Image(),a = S.Drawing.getArea();image.onload = function () {shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);shapeContext.drawImage(this, 0, 0, a.h * 0.6, a.h * 0.6);callback(processCanvas());};image.onerror = function () {callback(S.ShapeBuilder.letter('What?'));}image.src = url;},circle: function (d) {var r = Math.max(0, d) / 2;shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);shapeContext.beginPath();shapeContext.arc(r * gap, r * gap, r * gap, 0, 2 * Math.PI, false);shapeContext.fill();shapeContext.closePath();return processCanvas();},letter: function (l) {var s = 0;setFontSize(fontSize);s = Math.min(fontSize,(shapeCanvas.width / shapeContext.measureText(l).width) * 0.8 * fontSize, (shapeCanvas.height / fontSize) * (isNumber(l) ? 1 : 0.45) * fontSize);setFontSize(s);shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);shapeContext.fillText(l, shapeCanvas.width / 2, shapeCanvas.height / 2);return processCanvas();},rectangle: function (w, h) {var dots = [],width = gap * w,height = gap * h;for (var y = 0; y < height; y += gap) {for (var x = 0; x < width; x += gap) {dots.push(new S.Point({x: x,y: y,}));}}return { dots: dots, w: width, h: height };}};
}());S.Shape = (function () {var dots = [],width = 0,height = 0,cx = 0,cy = 0;function compensate() {var a = S.Drawing.getArea();cx = a.w / 2 - width / 2;cy = a.h / 2 - height / 2;}return {shuffleIdle: function () {var a = S.Drawing.getArea();for (var d = 0; d < dots.length; d++) {if (!dots[d].s) {dots[d].move({x: Math.random() * a.w,y: Math.random() * a.h});}}},switchShape: function (n, fast) {var size,a = S.Drawing.getArea();width = n.w;height = n.h;compensate();if (n.dots.length > dots.length) {size = n.dots.length - dots.length;for (var d = 1; d <= size; d++) {dots.push(new S.Dot(a.w / 2, a.h / 2));}}var d = 0,i = 0;while (n.dots.length > 0) {i = Math.floor(Math.random() * n.dots.length);dots[d].e = fast ? 0.25 : (dots[d].s ? 0.14 : 0.11);if (dots[d].s) {dots[d].move(new S.Point({z: Math.random() * 20 + 10,a: Math.random(),h: 18}));} else {dots[d].move(new S.Point({z: Math.random() * 5 + 5,h: fast ? 18 : 30}));}dots[d].s = true;dots[d].move(new S.Point({x: n.dots[i].x + cx,y: n.dots[i].y + cy,a: 1,z: 5,h: 0}));n.dots = n.dots.slice(0, i).concat(n.dots.slice(i + 1));d++;}for (var i = d; i < dots.length; i++) {if (dots[i].s) {dots[i].move(new S.Point({z: Math.random() * 20 + 10,a: Math.random(),h: 20}));dots[i].s = false;dots[i].e = 0.04;dots[i].move(new S.Point({ x: Math.random() * a.w,y: Math.random() * a.h,a: 0.3, //.4z: Math.random() * 4,h: 0}));}}},render: function () {for (var d = 0; d < dots.length; d++) {dots[d].render();}}}
}());S.init();

运行效果:

20240120_090246

代码可以直接复制

如果有啥问题可以问我看到一定会回复大家,如果大家喜欢可以作者点赞和关注

大家的支持是我创作下去的最大动力!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/637099.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Bit.Store 加密卡集成主流 BRC20通证,助力 BTC 生态流动性

“Bit.Store 首创性的将包括 ORDI、SATS、以及 RATS 在内的主流 BRC20 资产集成到其加密卡支付中&#xff0c;通过以其推出的加密银行卡为媒介&#xff0c;助力 BTC 生态 Token 的流动性与消费。” 比特币网络在被设计之初&#xff0c;就是以一种去中心化、点对点的现金系统为定…

shardingsphere 出现 Cannot support database type ‘MySQL‘

场景 近日一个项目使用了shardingsphere后出现 java.lang.UnsupportedOperationException: Cannot support database type MySQL , 重点是在dev-pre环境中无法出现这个问题&#xff0c;而是在prod环境中会发生&#xff0c;且prod也不是100%发生&#xff0c; 当流量过大时会发…

js-cookie的使用--token的数据实现持久化

1.下载 npm install js-cookie 2.引入 import Cookies from "js-cookie"; 3.使用 // 写入cookie Cookies.set(name, value) // 读取 Cookies.get(name) // > value Cookies.get(nothing) // > undefined // 读取所有可见的cookie Cookies.get() // 删除某项co…

Vue2:全局事件总线

一、场景描述 之前我们学习了&#xff0c;通过props实现父子组件之间的通信。通过自定义组件&#xff0c;实现了子给父传递数据。 那么&#xff0c;兄弟关系的组件&#xff0c;如何通信了&#xff1f;任意组件间如何通信了&#xff1f; 这个时候&#xff0c;就要学习全局事件总…

JavaScript快速入门一

概述 JavaScript ECMAScript JavaScript特有的东西(BOM DOM) ECMAScript&#xff1a;客户端脚本语言&#xff0c;是欧洲计算机制造商协会ECMA&#xff0c;制定的标准&#xff0c;统一了所有客户端脚本语言的编码方式BOM&#xff1a;Browser Object Model&#xff0c;浏览器…

C#调用C动态链接库

前言 已经没写过博客好久了&#xff0c;上一篇还是1年半前写的LTE Gold序列学习笔记&#xff0c;因为工作是做通信协议的&#xff0c;然后因为大学时没好好学习专业课&#xff0c;现在理论还不扎实&#xff0c;不敢瞎写&#xff1b; 因为工作原因&#xff0c;经常需要分析一些字…

Gin之gin介绍和安装

1、gin介绍 1.1 gin 是什么&#xff1f; Gin 是一个用 Go (Golang) 编写的 HTTP web 框架。 它是一个类似于 martini 但拥有更好性能的 API 框架&#xff0c;由于 httprouter&#xff0c;速度提高了近 40 倍。如果你需要极好的性能&#xff0c;使用 Gin 吧。 https://githu…

Unity-Arduino Bluetooth Plugin蓝牙插件使用时需要注意的一些事项(附插件下载链接)

一些参考链接 1.Android 无法扫描蓝牙设备踩坑 2.权限相关 1-首先要明确你的蓝牙设备是经典蓝牙还是低功耗&#xff08;BLE)蓝牙&#xff1a; 转载&#xff1a;Android蓝牙开发—经典蓝牙和BLE&#xff08;低功耗&#xff09;蓝牙的区别 2.如果是BLE蓝牙&#xff0c;需要打勾…

display布局实现一侧的盒子高度与另一侧盒子的高度等高

实现两边容器的高度等高主要是用 align-items: stretch 这个属性 stretch 拉伸: 子元素没有高度或高度为auto&#xff0c;将占满整个容器的高度 <template><div><h3>我是测试页面</h3><div class"container"><div class"left-…

原码,补码的除法

目录 一.原码的除法 &#xff08;1&#xff09;恢复余数法 重点看这 &#xff08;2&#xff09;不恢复余数法&#xff08;加减交替法&#xff09; 重点看这 二. 补码除法运算 重点看这 我们已经学习了如何进行原码&#xff0c;补码的乘法&#xff1a; http://t.csdnimg…

RibbonGroup 添加QAction下拉带Menu

实现代码如下所示&#xff1a; { QMenu* pMenu new QMenu(this); pMenu->addAction(QIcon(":/QRibbonDemo/res/smallpaste.png"), tr("Menu1")); pMenu->addAction(QIcon(":/QRibbonDemo/res…

Django随笔

关于Django的admin 1. 在url中把 from django.contrib import admin 重新解开 把path(admin/,admin.site.urls), 解开 2. 注册app&#xff0c;在配置文件中写 django.contrib.admin, 3.输入命令进行数据库迁移 Django国际化 配置文件中&#xff08;改成中文&#xff09; LA…

NLP自然语言处理介绍

自然语言处理&#xff08;NLP&#xff0c;Natural Language Processing&#xff09;是一门涉及计算机与人类语言之间交互的学科。它的目标是使计算机能够理解和生成人类语言&#xff0c;从而更好地处理和解析大量的文本数据。NLP不仅是人工智能领域中一个重要的分支&#xff0c…

62 C++ 多线程 -- mutex互斥量只能使用一次的问题分析-----以及解决方案递归mutex:recursive_mutex。

一 前提 以及问题 我们注意到&#xff0c;如果mutex.lock()两次&#xff0c;就会有问题 如下的代码有runtime exception mutex mymutex;mymutex.lock();mymutex.lock();//共享数据访问处理代码mymutex.unlock();mymutex.unlock(); 但是有这样的case存在 class Teacher183 …

SPI 动态服务发现机制

SPI&#xff08;Service Provier Interface&#xff09;是一种服务发现机制&#xff0c;通过ClassPath下的META—INF/services文件查找文件&#xff0c;自动加载文件中定义的类&#xff0c;再调用forName加载&#xff1b; spi可以很灵活的让接口和实现分离&#xff0c; 让API提…

Spring Boot整合Redis的高效数据缓存实践

引言 在现代Web应用开发中&#xff0c;数据缓存是提高系统性能和响应速度的关键。Redis作为一种高性能的缓存和数据存储解决方案&#xff0c;被广泛应用于各种场景。本文将研究如何使用Spring Boot整合Redis&#xff0c;通过这个强大的缓存工具提高应用的性能和可伸缩性。 整合…

Pyro —— 简介

目录 Differences between legacy and sparse pyro Getting started with pyro using shelf tools Related pyro nodes Sourcing DOP simulation SOP simulation Post-Processing Rendering Simple FX shelf tools Pyro为Houdini的体积流体&#xff08;volumetric flu…

c++函数重载(同名函数)功能,区别于c语言

c可以使用同名函数&#xff0c;实现功能类似的多个功能 规则&#xff1a; ①函数名相同&#xff0c;但是函数的参数&#xff08;形参&#xff09;绝不相同 ②参数个数不同 ③参数个数相同&#xff0c;参数类型不同 只有返回值类型不同&#xff0c;不可以&#xff1b;只有形…

力扣hot100 找到字符串中所有字母异位词 滑动窗口 双指针 一题双解

Problem: 438. 找到字符串中所有字母异位词 文章目录 思路滑动窗口 数组滑动窗口 双指针 思路 &#x1f469;‍&#x1f3eb; 参考题解 滑动窗口 数组 ⏰ 时间复杂度: O ( n ) O(n) O(n) &#x1f30e; 空间复杂度: O ( 1 ) O(1) O(1) class Solution { // 滑动窗口 …

VM使用教程--SDK取图 视频笔记

本笔记均由海康机器人官网的V学院视频中记录所得&#xff0c;属于省流大师了[doge] 图像采集 图像采集包括1图像源&#xff0c;2多图采集&#xff0c;3输出图像&#xff0c;4缓存图像&#xff0c;5光源 1图像源 图像源包括本地图像&#xff0c;相机采图&#xff0c;SDK 本…