canvas绘制的直线动画


Posted in Javascript onJanuary 23, 2017

话不多说,请看代码:

<!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 表示画布节点
 //staX 表示开始x坐标
 //staY 表示开始y坐标
 //len表示终点坐标,
 //timing表示运行的间隔时间, 
 //num表示坐标增长的大小 
 //direc表示判断绘制线条的方向,false表示X轴,ture表示Y轴
 //lw表示线宽的大小 
 //color 表示绘制线条颜色
 Anim.prototype.draw = function() { //绘制直线的线条
 var opt = this.opt; //设置对象的属性
 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) { //停止循环
  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(); //执行绘制
 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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 用Node.js写Shell脚本[译]
Sep 20 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
写给小白看的JavaScript异步
Nov 29 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
小程序实现发表评论功能
Jul 06 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 Javascript
angular共享依赖的解决方案分享
Oct 15 Javascript
关于小程序优化的一些建议(小结)
Dec 10 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 #Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 #Javascript
Javascript中构造函数要注意的一些坑
Jan 23 #Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 #Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 #Javascript
利用JS实现简单的日期选择插件
Jan 23 #Javascript
获取IE浏览器Cookie信息的方法
Jan 23 #Javascript
You might like
详谈PHP编码转换问题
2015/07/28 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
window.onload使用指南
2015/09/13 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
简单介绍Python中的decode()方法的使用
2015/05/18 Python
基于Python实现文件大小输出
2016/01/11 Python
深入理解Python3中的http.client模块
2017/03/29 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
保安自我鉴定范文
2013/12/08 职场文书
村干部承诺书
2014/03/28 职场文书
教师个人师德总结
2015/02/06 职场文书
应届毕业生自荐信
2015/03/04 职场文书
欠款证明
2015/06/24 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
详解Python牛顿插值法
2021/05/11 Python
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL