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 相关文章推荐
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
React优化子组件render的使用
May 12 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
vue el-upload上传文件的示例代码
Dec 21 Vue.js
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实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
Python入门篇之对象类型
2014/10/17 Python
Python多线程编程简单介绍
2015/04/13 Python
Python实现简单的代理服务器
2015/07/25 Python
Python模拟百度登录实例详解
2016/01/20 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
python Selenium实现付费音乐批量下载的实现方法
2019/01/24 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
python批量下载抖音视频
2019/06/17 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
幼儿园义卖活动方案
2014/01/17 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书