js canvas逐個打字並畫心形
阿新 • • 發佈：2018-12-21
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name ="viewport"content ="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0"/> <title>test</title> <style type="text/css"> html, body { width: 100%; height: 100%; background: #ffffec; } * { margin: 0; padding: 0; } .body{ display: flex; } .left{ display: inline-block; margin-top: 60px; margin-left: 30px; width: 300px; } .code{ } #garden{ margin-top: 60px; flex: 1; max-width: 600px; text-align: center; margin: 0 auto; } </style> </head> <!-- <body onload="defaultUrl()"> --> <body > <div class="body"> <div class="left"> <div><span class="timeElapse"></span></div> <div class="code"> <span>這是測試啊</span> <span>漸變可以填充在矩形, 圓形, 線條, 文字等等, 各種形狀可以自己定義不同的顏色。 以下有兩種不同的方式來設定Canvas漸變： createLinearGradient(x,y,x1,y1) - 建立線條漸變 createRadialGradient(x,y,r,x1,y1,r1) - 建立一個徑向/圓漸變 當我們使用漸變物件，必須使用兩種或兩種以上的停止顏色。 addColorStop()方法指定顏色停止，引數使用座標來描述，可以是0至1. 使用漸變，設定fillStyle或strokeStyle的值為 漸變，然後繪製形狀，如矩形，文字，或一條線。 使用 createLinearGradient(): </span> </div> </div> <img style="display:none" id="pic" src="img/heart.jpg" alt="The Scream" width="10" height="10" /> <canvas id="garden"></canvas> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/garden.js"></script> <script> var offsetX = $("#loveHeart").width() / 2; var offsetY = $("#loveHeart").height() / 2 - 55; var canvas=$('#garden')[0]; canvas.width=600; canvas.height=500; var gardenCtx = canvas.getContext("2d"); gardenCtx.beginPath(); //開始繪圖 gardenCtx.translate(250,250); //設定繪圖原點 var pic=document.getElementById("pic");; (function($){ $.fn.test=function(){ this.each(function() { var $ele=$(this),str=$ele.html(),progress=0; $ele.html(''); var timer=setInterval(function(){ var current = str.substr(progress, 1);//從開始擷取的長度 if(current=='<'){ progress = str.indexOf('>', progress) + 1;//從某位置開始搜尋某字元 } else{ progress++ } //progress & 1 意思是2者做且運算，即progress%2==1為true $ele.html(str.substring(0, progress)+ (progress & 1 ? '_' : '')); if (progress >= str.length) { clearInterval(timer); } }, 80); }); return this;//此處要寫，不然不能鏈式呼叫 } })(jQuery); function timeElapse(){ var StartTime='2018-11-10'; var NowTime=new Date(); var startGetTime=new Date(StartTime).getTime(); var nowGetTime=NowTime.getTime(); var chaTime=(nowGetTime-startGetTime)/1000; var day=Math.floor(chaTime/(3600*24)); var hour=Math.floor((chaTime%(3600*24))/3600); var M=Math.floor(((chaTime%(3600*24))%3600)/60); var S=Math.floor((((chaTime%(3600*24))%3600)%60)); var str=day+'天'+hour+'小時'+M+'分鐘'+S+'秒'; $('.timeElapse').html(str); } //獲取點 function getHeartPoint(angle) { // 桃心型線的引數方程： // x = 16(sinθ)^3 // y = 13cosθ- 5 cos 2θ - 2 cos 3θ - cos 4θ var t = angle / Math.PI; var x = 15* (16 * Math.pow(Math.sin(t), 3)); var y = - 15 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)); return new Array(offsetX + x, offsetY + y); } function startHeartAnimation() { var interval = 50; var angle = 10; var heart = new Array(); var animationTimer = setInterval(function () { var bloom = getHeartPoint(angle); // gardenCtx.moveTo(bloom[0],bloom[1]); // gardenCtx.lineTo(bloom[0]+1,bloom[1]+1); // gardenCtx.stroke(); gardenCtx.drawImage(pic,bloom[0],bloom[1],15,15); angle += 0.2; if(angle>=30){ clearInterval(animationTimer) } }, 50); } setInterval(function () { timeElapse(); }, 1000); setTimeout(function () { startHeartAnimation(); }, 1000); $('.code').test().css('color','#333'); timeElapse(); startHeartAnimation(); </script> </body> </html>
效果如下：
