快捷導(dǎo)航

canvas繪制的直線動畫

更新時間：2017年01月23日 10:16:57 作者：webLS

本文主要分享了canvas繪制的直線動畫的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧

話不多說，請看代碼：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>first line</title>
 <style type="text/css">
       body{
         background: #456E89;
       }
 .canvas {
 height: 300px;
 width: 300px; 
 margin: 0 auto;
 font-family: arial;
 }
 </style>
 </head>
 <body>
 <div class="canvas">
 <canvas id="cvs" width="300" height="300"></canvas>
 </div>
 <script type="text/javascript">
 var cvs = document.getElementById("cvs").getContext("2d");
 function Anim(opt) { //初始化值
 this.opt = opt;
 }
 //node 表示畫布節(jié)點
 //staX 表示開始x坐標
 //staY 表示開始y坐標
 //len表示終點坐標，
 //timing表示運行的間隔時間， 
 //num表示坐標增長的大小 
 //direc表示判斷繪制線條的方向，false表示X軸，ture表示Y軸
 //lw表示線寬的大小 
 //color 表示繪制線條顏色
 Anim.prototype.draw = function() { //繪制直線的線條
 var opt = this.opt; //設(shè)置對象的屬性
 var adx = opt.staX;
 var ady = opt.staY;
 var that = {
  x: opt.staX,
  y: opt.staY
 };
 var Time = setInterval(function() {
  opt.direc //判斷繪制方向
  ?
  opt.len > ady ? ady += opt.num : ady -= opt.num :
  opt.len > adx ? adx += opt.num : adx -= opt.num;
  if(adx == opt.len || ady == opt.len) { //停止循環(huán)
  clearInterval(Time);
  }
  opt.Node.beginPath(); // 開始繪制線條
  opt.Node.moveTo(that.x, that.y);
  opt.Node.lineTo(adx, ady);
  opt.Node.lineWidth = opt.lw || 1;
  opt.Node.strokeStyle = opt.color;
  opt.Node.stroke();
 }, opt.timing);
 };
 Anim.prototype.txt = function(opc) {//繪制文字 
 cvs.beginPath();
 cvs.fillStyle = "rgba(255,255,255,"+opc+")";
 cvs.font = "200px arial";
 cvs.fillText("L", 100, 200);
 };
 var line1 = new Anim({ //實例
 Node: cvs,
 color: "#fff",
 staX: 114,
 staY: 58,
 len: 134,
 timing: 50,
 num: 1,
 direc: false,
 lw: 2
 });
 line1.draw(); //執(zhí)行繪制
 var line2 = new Anim({
 Node: cvs,
 color: "#fff",
 staX: 115,
 staY: 58,
 len: 200,
 timing: 20,
 num: 1,
 direc: true,
 lw: 2
 });
 line2.draw();
 var line3 = new Anim({
 Node: cvs,
 color: "#fff",
 staX: 133,
 staY: 184,
 len: 58,
 timing: 20,
 num: 1,
 direc: true,
 lw: 2
 });
 line3.draw();
 var line4 = new Anim({
 Node: cvs,
 color: "#fff",
 staX: 132,
 staY: 184,
 len: 203,
 timing: 35,
 num: 1,
 direc: false,
 lw: 2
 });
 line4.draw();
 var line5 = new Anim({
 Node: cvs,
 color: "#fff",
 staX: 203,
 staY: 199,
 len: 115,
 timing: 35,
 num: 1,
 direc: false,
 lw: 2
 });
 line5.draw();
 var line6 = new Anim({
 Node: cvs,
 color: "#fff",
 staX: 203,
 staY: 199,
 len: 184,
 timing: 50,
 num: 1,
 direc: true,
 lw: 2
 });
 line6.draw();
 var test = new Anim();//繪制文字實例
 setTimeout(function () {
 var num = 0;
 var times = setInterval(function () {
  num++;
  var t = num/100;
  if(t === 1){
  clearInterval(times);
  }
  test.txt(t);
 },50)
 },3000)
 </script>
 </body>
</html>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: