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 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
js几个验证函数代码
Mar 25 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 Javascript
es6函数之严格模式用法实例分析
Mar 17 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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
生成sessionid和随机密码的例子
2006/10/09 PHP
PHP 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
ThinkPHP应用模式扩展详解
2014/07/16 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
javascript 禁止复制网页
2009/06/11 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
python列表操作之extend和append的区别实例分析
2015/07/28 Python
Python中for循环和while循环的基本使用方法
2015/08/21 Python
Python三级目录展示的实现方法
2016/09/28 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
python 制作简单的音乐播放器
2020/11/25 Python
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
法学专业自我鉴定
2014/02/05 职场文书
小学生元旦广播稿
2014/02/21 职场文书
学生会主席竞聘书
2014/03/31 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
公益广告标语
2014/06/19 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
单位委托书格式范本
2014/09/29 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫