基于Canvas的画线动画效果
来源:互联网 发布:项链淘宝店铺照片 编辑:程序博客网 时间:2024/06/05 01:42
想着用js实现一个画线动画,借助Canvas实现了。动画效果:
手机端访问 https://sagitarioo.github.io/Personal/htmlCode/linePaint/lineShow.html
电脑端访问 https://sagitarioo.github.io/Personal/htmlCode/linePaint/lineShow01.html
手机与电脑显示区别主要在于屏幕长宽比例。
实现代码:
<!DOCTYPE html><html><head><title>lineShowOnPhone</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></head><body><style type="text/css">#vas{width: 100%;border: 1px solid #f0f0f0;margin: auto;}</style><canvas id="vas"></canvas><script type="text/javascript">var canvas=$("#vas");canvas[0].width=1000;canvas[0].height=1000;var context=canvas[0].getContext('2d');context.lineWidth=4;context.strokeStyle='#f00';context.moveTo(500,500);var intervals,intervalss;var i=1;var x=500,y=500;var len=50;//边距var m=500,n=500,p=500,q=500;var times=21//circle timesvar intervalTime=1;//timevar speed=10;//speedvar d=new Date();var stime=d.getTime();intervals=setInterval(draw,100);function draw(){x=p-Math.pow(-1,i)*len*i;if((Math.pow(-1,i)<0)&&(m<x) || (Math.pow(-1,i)>0)&&(m>x)){m=m-speed*Math.pow(-1,i);context.lineTo(m,y);context.stroke();}else{clearInterval(intervals);if(i<times){intervalss=setInterval(draws,intervalTime);p=p-Math.pow(-1,i)*len*i;}var de=new Date();var etime=de.getTime();var runtime=etime-stime;console.log("run time="+runtime);}}function draws(){y=q-Math.pow(-1,i)*len*i;if((Math.pow(-1,i)<0)&&(n<y) || (Math.pow(-1,i)>0)&&(n>y)){n=n-speed*Math.pow(-1,i);context.lineTo(x,n);context.stroke();}else{clearInterval(intervalss);intervals=setInterval(draw,intervalTime);q=q-Math.pow(-1,i)*len*i;i++;}}</script></body></html>
阅读全文
0 0
- 基于Canvas的画线动画效果
- 画线 动画效果
- Canvas的画线技巧
- WPF 画线动画效果实现
- 基于canvas使用粒子拼出你想要的文字[2]——粒子的动画效果
- 7 款基于 HTML5 Canvas 的超炫 3D 动画效果
- 7 款基于 HTML5 Canvas 的超炫 3D 动画效果
- canvas动画效果
- canvas绘制动画效果
- canvas简单动画效果
- HTML5 Canvas 基于OO的动画实例
- 基于Html5 Canvas的帧动画生成器
- 基于Konva.js的canvas动画
- 基于HTML5 canvas的jQuery刮刮卡效果
- 基于canvas画布的星空效果
- 基于canvas写一个字的效果
- Canvas实现绚丽的倒计时效果(动画效果)
- Canvas画线
- 深入理解javascript原型和闭包(18)——完结
- ubuntu卸载安装软件
- 数据结构 — 冒泡排序以及其优化
- 在flask中使用蓝图将路由分开写在不同文件
- ES5
- 基于Canvas的画线动画效果
- 简单理解java中的宏常量
- 欢迎使用CSDN-markdown编辑器
- 17.11.20,web学习第七天,还有一年,努力吧青年
- 11.20 jQuery基础
- 千岛湖冰水救人,程序员见义勇为,手工点赞!
- Swift基础 可选
- 系统间通信方式之(Kafka的集群方案介绍2)(二十一)
- tf21: 身份证识别——识别身份证号