您的位置：首页 > Web前端 > JavaScript

基于Canvas的画线动画效果

2017-11-20 14:41 190 查看

想着用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 times
var intervalTime=1;//time
var speed=10;//speed

var 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
4000
-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 动画 javascript

相关文章推荐

新的分享

章节导航