Memasang Kode Text Laser with audio
Login ke akun blog klik tombol blog baru, buat satubuah link baru
kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut,
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut : Get Blank Template. edit background warna sesuai keinginan klik simpan selesai.
Login ke akun blog klik tombol blog baru, buat satubuah link baru
kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut,
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut : Get Blank Template. edit background warna sesuai keinginan klik simpan selesai.
<style class="Mys2010-styles">
body {font-family:"vivaldi";font-size: 1px;left: 130px;color: #000;margin-top:19px;height:100%;overflow:hidden;}
body {
background:#000;}
body {
text-shadow:
0 0 .4em currentcolor,
0 0 .35em yellow,
0 0 .5em orange,
0 0 1em red,
0 0 2em white;
}
header {
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
padding: 0px 0;
position: fixed;
top:-4px;
width: 100%;
text-align: center;
font-size: 6px;
background: linear-gradient(270deg, #333, #660099, rgba(255, 0, 0, 0.60), #660099,#660, #B20000, #660, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60));
border-bottom: 3px solid #333;
-webkit-animation: shadow 6s ease-in-out infinite;
animation: shadow 6s ease-in-out infinite;
}
.ap {
position: fixed;
right: 0;
bottom:-5px;
left: 0;
height: 70px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
font-size: 11px;
background: linear-gradient(270deg, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60), #660099,#660, #B20000, #660, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60));
border-top: 2px solid rgba(46, 56, 79, 0.85);
z-index: 9999;
}
h2 {
padding:15px;
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%);
background: linear-gradient(transparent 10%, #333 50%, transparent 90%);
-webkit-animation: shadow 1s ease-in-out infinite;
animation: shadow 1s ease-in-out infinite;
}
M-2010, #teks, #posisi, #dibawah, span {
font: 900 15vw Raleway;
position: relative;
display: inline-block;
}
#M-2010, #teks, #posisi, #dibawah {
position: absolute;
font-size: 11px;
margin: 2px
}
#M-2010, #teks div {
text-decoration: underline;
cursor: pointer
}
#teks, #posisi {
text-align: right;
right: 50px;
}
#teks, #dibawah {
text-align: left;
left: 50px;
}
#dibawah, #posisi {
bottom:28px;
-webkit-animation: shadow 6s ease-in-out infinite;
animation: shadow 6s ease-in-out infinite;
}
@keyframes shadow {
0% {
text-shadow: 0 0 2px #B0E0E6 ,
0 0 8px #B0E0E6 , 0 0 10px #B0E0E6 ,
0 0 20px #B0E0E6 , 0 0 30px #B0E0E6 ,
0 0 40px #B0E0E6, 0 0 50px #B0E0E6 ,
0 0 80px #B0E0E6;
}
50% {
text-shadow: 0 12px 7px rgba(255, 0, 0, 0.8),
0 5px 15px rgba(0, 0, 0, 0.90), 0 0 50px rgba(0, 0, 0, 0.90),
0 -10px 2px rgba(255, 0, 0, 0.8);
}
100% {
text-shadow: 0 0 2px #800080 ,
0 0 8px #800080 , 0 0 10px #800080 ,
0 0 20px #800080 , 0 0 30px #800080 ,
0 0 40px #800080 , 0 0 50px #800080 ,
0 0 80px #800080 ;
}
}
/*end*/
.shadow-top:after {
content: " ";
box-shadow: 0 0 200px 200px #111;
}
.shadow-top:before {
content: " ";
box-shadow: 0 0 200px 20px rgba(255, 0, 0, 0.90);
}
#M2010-shadow {
margin:-110px;
box-shadow: 0 0 150px 25px #Ff0;
}
.shadow1:before,.shadow1:after {
z-index:-1;
position:absolute;
content: " ";
bottom:25px;
left:10px;
width:50%;
max-width:110px;
box-shadow: 0 0 200px 90px rgba(255, 0, 0, 0.90);
-webkit-transform:rotate(-8deg);
-moz-transform:rotate(-8deg);
-o-transform:rotate(-8deg);
-ms-transform:rotate(-8deg);
transform:rotate(-8deg);
}
.shadow1:after {
-webkit-transform:rotate(8deg);
-moz-transform:rotate(8deg);
-o-transform:rotate(8deg);
-ms-transform:rotate(8deg);
transform:rotate(8deg);
right:10px;
left:auto;
}
.b-nav, body:after {
position: absolute;
right: 0;
}
.b-brand, .b-link {
font-size: 18px;
font-weight: 700;
margin-left: 0;
text-decoration: none;
font-family: "Roboto Slab", serif;
text-transform: uppercase;
;
}
@-webkit-keyframes slideInLeft {
0% {
-webkit-transform: translate3d(345px, 0, 0);
transform: translate3d(345px, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
}
@keyframes slideInLeft {
0% {
-webkit-transform: translate3d(345px, 0, 0);
transform: translate3d(345px, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
}
* {
box-sizing: border-box
}
body:after {
background: #000;
content: '';
height: 100%;
left: 0;
opacity: 0;
padding: 0;
top: 0;
visibility: hidden;
-webkit-transition: all .6s ease;
transition: all .6s ease;
width: 100%;
}
body.open:after {
z-index: 10;
opacity: 0.65;
height: 100000%;
visibility: visible
}
.b-nav {
background: #000 none repeat scroll 0 0;
position: absolute;
top: 0;
width: 320px;
z-index: 12;
}
.b-nav:not(.open) {
animation-duration: 0.4s;
animation-fill-mode: both;
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft
}
.b-nav {
animation-duration: .4s;
animation-fill-mode: both;
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft
}
.b-nav ul {
padding-left: 0px;
}
.b-nav li {
color: #fff;
list-style-type: none;
padding: 10px 10px 10px 0;
text-align: left;
-webkit-transform: translateX(345px);
-ms-transform: translateX(345px);
transform: translateX(345px)
}
.b-nav li:not(.open) {
animation-duration: 0.4s;
animation-fill-mode: both;
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft
}
.b-nav li:not(.open), .b-nav.open li {
-webkit-animation-duration: 0.4s;
-webkit-animation-fill-mode: both
}
.b-nav li:first-child {
margin-top: 0px
}
.b-nav.open {
visibility: visible;
animation-duration: 0.4s;
animation-fill-mode: both;
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
.b-nav:not(.open) {
visibility: hidden;
animation-duration: 0.4s;
animation-fill-mode: backwards;
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft
}
.b-nav.open li {
padding-left: 30px;
animation-duration: 0.2s;
animation-fill-mode: both;
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft
}
.b-link {
background: 0 0;
border-left: rgba(255, 255, 255, 0)solid 2px;
color: #fff;
transition: all .4s ease;
width: auto
}
.b-link, .b-menu {
-webkit-transition: all .4s ease;
}
.b-nav li {
border-left: 5px solid #e00a12;
}
/*.b-link--active,
.b-link:hover {
border-left: #e00a12 solid 5px;
padding-left: 30px
}*/
.b-menu {
cursor: pointer;
display: block;
height: 66px;
padding-top: 20px;
position: relative;
top: -20px;
transition: all 0.4s ease 0s;
width: 43px;
z-index: 12;
right: 10px;
}
.b-bun--bottom, .b-bun--mid, .b-bun--top {
height: 2px;
width: 25px
}
.b-container.open .b-main, .b-menu:hover {}
.b-bun {
background: #fff;
transition: all .4s ease
}
.b-brand, .b-bun {
position: relative;
-webkit-transition: all .4s ease
}
.b-bun--top {
top: 0
}
.b-bun--mid {
top: 8px
}
.b-bun--bottom {
top: 16px
}
.b-brand {
color: #2196f3;
top: -21.43px;
transition: all .4s ease;
z-index: 13
}
.b-container {
position: absolute;
right: 0;
top: 20px;
}
.b-container:hover:not(.open) .bun-bottom, .b-container:hover:not(.open) .bun-mid, .b-container:hover:not(.open) .bun-top {
background: #2196f3
}
.b-container.open .b-bun--top {
background: #e00a12;
top: 9px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
}
.b-container.open .b-bun--mid {
opacity: 0
}
.b-container.open .b-bun--bottom {
background: #e00a12;
top: 5px;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg)
}
.b-container.open .b-brand {
color: #fff
}
.mobile-search-btn {
background-color: #e00a12;
border-radius: 4px;
color: #fff;
margin-bottom: 25px;
margin-left: 30px;
padding: 10px 20px;
text-transform: uppercase;
border:none;
}
.mobile-search {
background: transparent none repeat scroll 0 0;
border: 1px solid #fff;
color: #949494;
font-size: 14px;
margin-bottom: 20px;
margin-left: 30px;
padding: 10px;
width: 80%;
}
.circle {
position: relative;
border: 4px solid #8B0000;
width: 300px;
height: 300px;
margin: 0 auto;
background: firebrick;
border-radius: 50%;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZRURQqdK4AVdBjHIrKgbTDqWnLZLsLSCUmuANa5u2ZRTzyjM-6mmRlzZoZ85JCj8OjGDeH-k2df6Td96b1sgZKnycqYHq8jtCqwUYuJljFcirWam8eiQ5MWb-dcETr6cVsl51zwtbQ_w/s1600/Amos-Lee-Mission-M2010s.png);
background-size: cover;
margin-top:270px;
box-shadow: 0 0 300px -50px #ffe766;
}
.circle .rotate {
position: absolute;
width: 100%;
height: 100%;
animation: rotate 120s infinite linear;
}
.circle span {
position: absolute;
top: -40px;
left: calc(50% - 3.75px);
display: block;
width: 7.5px;
height: 190px;
font-family: Special Elite;
font-size: 1rem;
font-weight: 100;
font-weight: bold;
text-transform: uppercase;
color: #f0f;
transform-origin: bottom center;
}
.circle span:nth-child(1) {
transform: rotate(6.2deg);
}
.circle span:nth-child(2) {
transform: rotate(12.4deg);
}
.circle span:nth-child(3) {
transform: rotate(18.6deg);
}
.circle span:nth-child(4) {
transform: rotate(24.8deg);
}
.circle span:nth-child(5) {
transform: rotate(31deg);
}
.circle span:nth-child(6) {
transform: rotate(37.2deg);
}
.circle span:nth-child(7) {
transform: rotate(43.4deg);
}
.circle span:nth-child(8) {
transform: rotate(49.6deg);
}
.circle span:nth-child(9) {
transform: rotate(55.8deg);
}
.circle span:nth-child(10) {
transform: rotate(62deg);
}
.circle span:nth-child(11) {
transform: rotate(68.2deg);
}
.circle span:nth-child(12) {
transform: rotate(74.4deg);
}
.circle span:nth-child(13) {
transform: rotate(80.6deg);
}
.circle span:nth-child(14) {
transform: rotate(86.8deg);
}
.circle span:nth-child(15) {
transform: rotate(93deg);
}
.circle span:nth-child(16) {
transform: rotate(99.2deg);
}
.circle span:nth-child(17) {
transform: rotate(105.4deg);
}
.circle span:nth-child(18) {
transform: rotate(111.6deg);
}
.circle span:nth-child(19) {
transform: rotate(117.8deg);
}
.circle span:nth-child(20) {
transform: rotate(124deg);
}
.circle span:nth-child(21) {
transform: rotate(130.2deg);
}
.circle span:nth-child(22) {
transform: rotate(136.4deg);
}
.circle span:nth-child(23) {
transform: rotate(142.6deg);
}
.circle span:nth-child(24) {
transform: rotate(148.8deg);
}
.circle span:nth-child(25) {
transform: rotate(155deg);
}
.circle span:nth-child(26) {
transform: rotate(161.2deg);
}
.circle span:nth-child(27) {
transform: rotate(167.4deg);
}
.circle span:nth-child(28) {
transform: rotate(173.6deg);
}
.circle span:nth-child(29) {
transform: rotate(179.8deg);
}
.circle span:nth-child(30) {
transform: rotate(186deg);
}
.circle span:nth-child(31) {
transform: rotate(192.2deg);
}
.circle span:nth-child(32) {
transform: rotate(198.4deg);
}
.circle span:nth-child(33) {
transform: rotate(204.6deg);
}
.circle span:nth-child(34) {
transform: rotate(210.8deg);
}
.circle span:nth-child(35) {
transform: rotate(217deg);
}
.circle span:nth-child(36) {
transform: rotate(223.2deg);
}
.circle span:nth-child(37) {
transform: rotate(229.4deg);
}
.circle span:nth-child(38) {
transform: rotate(235.6deg);
}
.circle span:nth-child(39) {
transform: rotate(241.8deg);
}
.circle span:nth-child(40) {
transform: rotate(248deg);
}
.circle span:nth-child(41) {
transform: rotate(254.2deg);
}
.circle span:nth-child(42) {
transform: rotate(260.4deg);
}
.circle span:nth-child(43) {
transform: rotate(266.6deg);
}
.circle span:nth-child(44) {
transform: rotate(272.8deg);
}
.circle span:nth-child(45) {
transform: rotate(279deg);
}
.circle span:nth-child(46) {
transform: rotate(285.2deg);
}
.circle span:nth-child(47) {
transform: rotate(291.4deg);
}
.circle span:nth-child(48) {
transform: rotate(297.6deg);
}
.circle span:nth-child(49) {
transform: rotate(303.8deg);
}
.circle span:nth-child(50) {
transform: rotate(310deg);
}
.circle span:nth-child(51) {
transform: rotate(316.2deg);
}
.circle span:nth-child(52) {
transform: rotate(322.4deg);
}
.circle span:nth-child(53) {
transform: rotate(328.6deg);
}
.circle span:nth-child(54) {
transform: rotate(334.8deg);
}
.circle span:nth-child(55) {
transform: rotate(341deg);
}
.circle span:nth-child(56) {
transform: rotate(347.2deg);
}
.circle span:nth-child(57) {
transform: rotate(353.4deg);
}
.circle span:nth-child(58) {
transform: rotate(359.6deg);
}
.circle span:nth-child(59) {
transform: rotate(365.8deg);
}
.circle span:nth-child(60) {
transform: rotate(372deg);
}
.circle span:nth-child(61) {
transform: rotate(378.2deg);
}
.circle span:nth-child(62) {
transform: rotate(384.4deg);
}
.circle span:nth-child(63) {
transform: rotate(390.6deg);
}
.circle span:nth-child(64) {
transform: rotate(396.8deg);
}
.circle span:nth-child(65) {
transform: rotate(403deg);
}
.circle span:nth-child(66) {
transform: rotate(409.2deg);
}
.circle span:nth-child(67) {
transform: rotate(415.4deg);
}
.circle span:nth-child(68) {
transform: rotate(421.6deg);
}
.circle span:nth-child(69) {
transform: rotate(427.8deg);
}
.circle span:nth-child(70) {
transform: rotate(434deg);
}
.circle span:nth-child(71) {
transform: rotate(440.2deg);
}
.circle span:nth-child(72) {
transform: rotate(446.4deg);
}
.circle span:nth-child(73) {
transform: rotate(452.6deg);
}
.circle span:nth-child(74) {
transform: rotate(458.8deg);
}
.circle span:nth-child(75) {
transform: rotate(465deg);
}
.circle span:nth-child(76) {
transform: rotate(471.2deg);
}
.circle span:nth-child(77) {
transform: rotate(477.4deg);
}
.circle span:nth-child(78) {
transform: rotate(483.6deg);
}
.circle span:nth-child(79) {
transform: rotate(489.8deg);
}
.circle span:nth-child(80) {
transform: rotate(496deg);
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(-360deg);
}
}
canvas {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid #;
}
</style>
<div align="center" style="margin-top:110px"> <div class="shadow1"> </div> <div id="M2010-shadow"> </div> <div align="center"> <div class="shadow-top"> </div> <div class="M-logo"> </div> </div></div> </div></div>
<div class="mobile-nav"> <div class="b-nav"> <ul> <li><a class="b-link b-link--active" href="#">Song title</a></li> <li><a class="b-link" href="http://Link Title">1-Title</a></li> <li><a class="b-link" href="http://Link Title">2-Title</a></li> <li><a class="b-link" href="http://Link Title">3-Title</a></li> <li><a class="b-link" href="http://Link Title">4-Title</a></li> <li><a class="b-link" href="http://Link Title">5-Title</a></li> </ul> </div> <!-- Burger-Icon --> <div class="b-container"> <div class="b-menu"> <div class="b-bun b-bun--top"> </div> <div class="b-bun b-bun--mid"> </div> <div class="b-bun b-bun--bottom"> </div> </div> <!-- Burger-Brand --> <a href="#" class="b-brand"></a> </div> </div> <div class="ap" id="ap"> <div align="center"> <div id="dibawah"> <span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> EDITED BY. <a href="https://Link Download"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;"> M - 2010 </a> DOWNLOAD </a> </div> <div id="posisi"> <span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> COPYRIGHT <a href="http://codepen.io/Myscript2010/pen/dMrJLz" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;"> © - 2016 </a> CODEPEN </a> </div> <h2> <audio id="mys2010"src="https://sites.google.com/site/safe50534/lagu/Amos-lee-lue-eyes-color-flower-sprit-M2010.mp3"controls="controls"></audio></h2> </a></div> </div> <header> <a href="http://sample-mys2010.blogspot.co.id/2016/05/text-animation-laser.html"target="_blank" title="Mari Belajar"> <h2> <span style="color:orange; font-size: 10pt">LET'S STUDY</a> </h2> </a> </div> </header> <script src='https://sites.google.com/site/codesule/lagu/Menu-M2010.js'> </script> <div class="circle"> <div class="rotate"> </span><span>♥</span><span> </span><span>m</span><span>y</span><span>s</span><span> </span><span>2</span><span>0</span><span>1</span><span>0</span><span></span><span>l</span><span>e</span><span>a</span><span>r</span><span>n</span><span> </span><span>h</span><span>o</span><span>w</span><span> </span><span>t</span><span>o</span><span> </span><span>d</span><span>e</span><span>s</span><span>i</span><span>g</span><span>n</span><span> </span><span>&</span><span> </span> <span>b</span> <span>u</span><span>i</span><span>l</span><span>d</span><span> </span><span>b</span><span>e</span><span>a</span><span>u</span><span>t</span><span>i</span><span>f</span><span>u</span><span>l</span><span> </span><span>w</span><span>e</span><span>b</span> <span>s</span><span>i</span><span>t</span><span>e</span><span>s</span><span> </div> </div> <canvas id="canvas"></canvas> <canvas id="canvas2"></canvas>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'> </script> <script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'> </script> <link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'> <script src="https://sites.google.com/site/codesule/lagu/Musik-Mys2010.js"></script> <script src='https://sites.google.com/site/codesule/lagu/stopExecutionOnTimeout-M2010.js'> </script>
<script>"M-2010";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Particle = function () {
function Particle(x, y, size) {
_classCallCheck(this, Particle);
this.speed = 0.6;
this.x = x;
this.y = y;
this.vx = (Math.random() - 0.5) * this.speed;
this.vy = (Math.random() - 0.5) * this.speed;
this.opacity = 1;
this.size = size;
}
Particle.prototype.draw = function draw(context) {
this.opacity -= this.speed / 200;
context.fillStyle = this.color();
context.fillRect(this.x, this.y, this.size, this.size);
};
Particle.prototype.move = function move() {
this.x += this.vx;
// y speed is influenced by "gravity"
this.y += this.vy + (1 - this.opacity) * this.speed;
};
Particle.prototype.color = function color() {
return "rgba(0, 255, 0, " + this.opacity + ")";
};
return Particle;
}();
var Laser = function () {
function Laser(x, y) {
_classCallCheck(this, Laser);
this.x = x;
this.y = y;
this.steps = [];
this.particles = [];
}
Laser.prototype.drawTo = function drawTo(x, y, ctx) {
ctx.beginPath();
ctx.moveTo(this.x, this.y);
ctx.lineTo(x, y);
ctx.stroke();
ctx.fillStyle = "red";
ctx.fillRect(x, y, 5, 5);
};
Laser.prototype.drawEnd = function drawEnd(ctx) {
var p = this.steps.shift();
if (p !== undefined) {
this.drawTo(p[0], p[1], ctx);
} else {
var index = this.particles.length;
// Loop through backwards so we can remove
// particles from the array inside the loop.
while (index--) {
var p = this.particles[index];
p.move();
if (p.opacity < 0 || p.x < 0 || p.x > this.w || p.y < 0 || p.y > this.h) {
this.particles.splice(index, 1);
} else {
p.draw(ctx);
}
}
}
};
Laser.prototype.endFrom = function endFrom(x0, y0) {
var nrOfSteps = 800;
var i = nrOfSteps;
while (i--) {
var x = this.x + i * (x0 - this.x) / nrOfSteps + Math.cos(i / 10) * i / 4;
var y = this.y + i * (y0 - this.y) / nrOfSteps + Math.sin(i / 10) * i / 4;
this.steps.push([x, y]);
if (i < 100) {
this.particles.push(new Particle(this.x, this.y, 2));
}
}
};
return Laser;
}();
var LaserWriter = function () {
function LaserWriter(canvasId, canvas2Id) {
_classCallCheck(this, LaserWriter);
// The first canvas holds the text being drawn (static).
var canvas = document.getElementById(canvasId);
// The second canvas holds the laser beam and particles
// (animated).
var canvas2 = document.getElementById(canvas2Id);
this.ctx = canvas.getContext("2d");
this.ctx2 = canvas2.getContext("2d");
this.w = canvas.width = canvas2.width = 900;
this.h = canvas.height = canvas2.height = 500;
this.tick = 0;
this.pointsIndex = 0;
this.points = [];
this.particles = [];
// All the points that make up the whole word
this.size = 3;
this.startX = 0;
this.laserStart = { x: 300, y: 50 };
this.x = 0;
this.y = 0;
}
LaserWriter.prototype.init = function init(text, size) {
this.ctx.font = size + "px serif";
// Draw black text on the canvas temporarily
this.startX = (this.w - this.ctx.measureText(text).width * 3) * 0.5;
this.ctx.fillText(text, 1, 100);
var width = 500;
var height = 300;
var image = this.ctx.getImageData(0, 0, width, height);
var buffer32 = new Uint32Array(image.data.buffer);
for (var x = 0; x < width; x++) {
for (var y = 0; y < height; y++) {
// The buffer is linear, y*w+x is a trick
// to calculate the linear index.
if (buffer32[y * width + x]) {
// There is a pixel here, add a point
this.points.push([x, y]);
}
}
}
// Clear the text once, we will just be adding
// to this canvas from now on (no clearing).
this.ctx.clearRect(0, 0, this.w, this.h);
this.ctx.fillStyle = "#0033CC";
// For the laser
this.ctx2.strokeStyle = "#333";
this.ctx2.lineCap = "round";
this.ctx2.lineWidth = 4;
this.laser = new Laser(this.laserStart.y, this.laserStart.x);
};
LaserWriter.prototype.draw = function draw() {
var _this = this;
this.ctx2.clearRect(0, 0, this.w, this.h);
// Continue drawing text?
if (this.pointsIndex < this.points.length) {
// Ok, we are not done
// Draw the text, one point at a time
var p = this.points[this.pointsIndex];
this.x = p[0] * this.size + this.startX;
this.y = p[1] * this.size + 170;
this.drawPointAt(this.x, this.y);
//this.drawLaserTo(x, y);
this.laser.drawTo(this.x, this.y, this.ctx2);
// Just add a particle every other tick
if (this.tick % 2 === 0) {
var particle = new Particle(this.x, this.y, this.size);
this.particles.push(particle);
}
} else if (this.pointsIndex === this.points.length) {
this.laser.endFrom(this.x, this.y);
} else {
this.laser.drawEnd(this.ctx2);
}
this.drawParticles();
this.pointsIndex++;
this.tick++;
// Keep the animation going a while after we have
// drawn all the text to let the last particles
// fall off the screen and the laser end animation
// run.
if (this.pointsIndex < this.points.length + 10000) {
// Draw three steps (ticks) then redraw screen
if (this.tick % 3 === 0) {
requestAnimationFrame(function () {
return _this.draw();
});
} else {
this.draw();
}
}
};
LaserWriter.prototype.drawPointAt = function drawPointAt(x, y) {
this.ctx.beginPath();
this.ctx.arc(x, y, this.size * 1, 0, Math.PI * 2, false);
this.ctx.fill();
};
LaserWriter.prototype.drawParticles = function drawParticles() {
var index = this.particles.length;
// Loop through backwards so we can remove
// particles from the array inside the loop.
while (index--) {
var p = this.particles[index];
p.move();
if (p.opacity < 0 || p.x < 0 || p.x > this.w || p.y < 0 || p.y > this.h) {
this.particles.splice(index, 1);
} else {
p.draw(this.ctx2);
}
}
};
return LaserWriter;
}();
var laserWriter = new LaserWriter("canvas", "canvas2");
laserWriter.init("AMOS LEE BLUE EYES", 20);
laserWriter.draw();
</script>
If you want to directly copy and paste you canDownload Here Text Laser With Audio
