基于Canvas的画线动画效果

想着用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>

基于Canvas的画线动画效果相关推荐

canvas实现点线动画效果
效果图需求分析点随机产生并向随机方向以随机的速度匀速移动未点击时,点的总数保持不变:点击时在点击的位置产生数个新的点点与点之间在一定距离内有细线连接鼠标在画面中移动时,能够与其他点产生互动 ...
微信小程序动态点赞php,微信小程序小组件基于Canvas实现直播点赞气泡效果
这篇文章主要为大家详细介绍了微信小程序小组件,基于Canvas实现直播点赞气泡效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下先发Canvas实现直播点赞气泡效果图: 实现细节: 1.JS:d ...
微信小程序动态点赞php,微信小程序小组件基于Canvas实现直播点赞气泡效果
这篇文章主要为大家详细介绍了微信小程序小组件,基于Canvas实现直播点赞气泡效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下先发Canvas实现直播点赞气泡效果图: 实现细节: 1.JS: ...
基于canvas制作绚丽的倒计时效果
基于canvas制作绚丽的倒计时效果一.先看下效果项目设计: 数字渲染:数字是存储在一个三维数组里面,通过每次传入一个数字,来取出这个数字对应的点阵模型,这个模型是一个二维数组,有圆点的地方值为1 ...
Unity在Canvas上画线（Draw Line）实现
# 前言目前Unity官方提供的UI扩展包中包含了UILineRenderer组件,本篇实现与UILineRenderer实现一致,主要讲解其基本使用与实现过程.不想看的同学可以直接下载官方扩展包. ...
android陀螺仪实现背景移动demo,基于HTML5陀螺仪实现移动动画效果
这次给大家带来基于HTML5陀螺仪实现移动动画效果,基于HTML5陀螺仪实现移动动画效果的注意事项有哪些,下面就是实战案例,一起来看一下. 最近用ofo小黄车App的时候,发现以前下方扫一扫变成了一个 ...
Canvas科幻网状波浪动画效果
下载地址Canvas科幻网状波浪动画效果是一款正弦波弧度波浪动画,像素块波浪特效. dd:
基于Rebound制造绚丽的动画效果-入门篇
基于Rebound制造绚丽的动画效果-入门篇 Rebound是什么? Rebound是一个来自 Facebook 公司的 Java物理和动画库.Rebound spring 模型可用于创建动画,让你感 ...
CSS：文字下波浪线动画效果
之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的,类似下图gif示意: 这里就介绍下是如何实现的. 有两种实现方法,各有优劣. 一.使用径向渐变纯CSS实现就是使用径 ...

基于Canvas的画线动画效果

基于Canvas的画线动画效果相关推荐

最新文章

热门文章