canvas画圆和线条动画

最新推荐文章于 2024-05-29 11:16:42 发布

daily886

最新推荐文章于 2024-05-29 11:16:42 发布

阅读量1.4k

点赞数

分类专栏： js html 文章标签： javascript canvas

本文链接：https://blog.csdn.net/daily886/article/details/78676924

版权

js 同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas画圆和线条动画</title>
<style>
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
#canvas{
position:relative;
margin:50px auto;
}
</style>
<script>
/* requestAnimationFrame.js
* by zhangxinxu 2013-09-30
*/
(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz','ms','o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || // name has changed in Webkit
window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
}());
</script>
</head>
<body>
<div id="canvas" style="width:500px;height:500px;"></div>
</body>
</html>
<script>
var jquery = (function(){
var $ = function(id){
return document.getElementById(id) || id;
}
return $;
}());

var test = (function($){
var extend = function(target,source){
for(key in source){
if(key in target){
target[key] = source[key];
}
}
return target
}

var addEvent = function(obj,event,func){
obj.addEventListenter ? obj.addEventListenter(event,func,false) : obj.attachEvent("on"+event,function(){func.call(obj);});
}

var init = function(opt){
this.option = {
element : null
}
this.lineleft = { //从左边开始线条的参数
sx : 10, //起始坐标x
sy : 10, //起始坐标y
ex : 50, //结束坐标x
ey : 50, //结束坐标y
set : 3, //步进值
interval : null, //定时器
}
this.lineright = { //从右边开始线条的参数
set : 8,
interval : null,
}

this.circle = {
radius : 150, //最大半径
set : 1, //步进值
interval : null,
}
extend(this.option,opt);
this.initialize();

}

init.prototype = {
initialize : function(){
this.canvas = this.createCanvas(); //建立canvas ,要来填充线条
this.canvas.style.position = "absolute"; //线条要在圆上面，设置position:absolute;
this.canvas2 = this.createCanvas(); //建立canvas2 ,要来填充圆
this.circle.x = this.canvas.width/2,
this.circle.y = this.canvas.height/2,
this.lineright.sx = this.canvas.width;
this.lineright.sy = 0;
this.lineright.ex = this.canvas.width-(this.canvas.width/10);
this.lineright.ey = this.canvas.width/10;
this.ctx = this.canvas.getContext("2d");
this.ctx2 = this.canvas2.getContext("2d");

this.circlegrd = this.ctx.createRadialGradient(this.circle.x,this.circle.y,0,this.circle.x,this.circle.y,this.circle.radius); //径向渐变
//参数：起始圆心x,起始圆心y,起始圆半径,结束圆心x,结束圆心y,结束圆半径
this.loopCircle(this.circle.x,this.circle.y,this.circle.set);

this.linegrd = this.ctx.createLinearGradient( 0 , 0, this.canvas.width , this.canvas.width ); //线条渐变
//参数：起始x,起始y,结束x,结束y
this.loopleft(this.lineleft.sx,this.lineleft.sy,this.lineleft.ex,this.lineleft.ey,this.lineleft.set);
this.loopright(this.lineright.sx,this.lineright.sy,this.lineright.ex,this.lineright.ey,this.lineright.set);

},
loopleft : function(sx,sy,ex,ey,set){ //参数：起始x,起始y,结束x,结束y,步进值
var _this = this;
if(sx >= this.canvas.width){return;}
_this.drawLine(sx,sy,ex,ey,set);
sx = sx+set; //每次移动的坐标sx
sy = sy+set; //每次移动的坐标sy
ex = ex+set; //每次移动的坐标ex
ey = ey+set; //每次移动的坐标ey
this.lineleft.interval = window.requestAnimationFrame(function(){_this.loopleft(sx,sy,ex,ey,set)});
//requestAnimationFrame是每16.7毫秒运行一次

},
loopright : function(sx,sy,ex,ey,set){ //参数：起始x,起始y,结束x,结束y,步进值
var _this = this;
if(sx <= 0){return;}
_this.drawLine(sx,sy,ex,ey,set);
sx = sx-set; //每次移动的坐标sx
sy = sy+set; //每次移动的坐标sy
ex = ex-set; //每次移动的坐标ex
ey = ey+set; //每次移动的坐标ey
window.requestAnimationFrame(function(){_this.loopright(sx,sy,ex,ey,set)});

//requestAnimationFrame是每16.7毫秒运行一次

},
loopCircle : function(x,y,set){ //参数：圆心x,圆心y,散射圆半径
var _this = this;
if(set >= this.circle.radius){return;}
_this.drawCircle(x,y,set);
set+=this.circle.set;
this.circle.interval = window.requestAnimationFrame(function(){_this.loopCircle(x,y,set);});
},
drawCircle : function(x,y,radius){ //参数：x,y,散射圆半径
this.ctx2.save();
this.circlegrd.addColorStop(0,"#1EF9F7");
this.circlegrd.addColorStop(0.25,"#FC0F31");
this.circlegrd.addColorStop(0.5,"#ECF811");
this.circlegrd.addColorStop(0.75,"#2F0AF1");
this.circlegrd.addColorStop(1,"#160303");
this.ctx2.beginPath();
this.ctx2.fillStyle = this.circlegrd;
this.ctx2.arc(x,y,radius-(radius/7),0*Math.PI/180,360*Math.PI/180);
this.ctx2.fill();
this.ctx2.restore();
},

drawLine : function(sx,sy,ex,ey){ //参数：起始x,起始y,结束x,结束y
this.ctx.save();
this.ctx.beginPath(); //开始线条
this.linegrd.addColorStop(0,"#fff");
this.linegrd.addColorStop(1,"#000");
this.ctx.strokeStyle = this.linegrd;
this.ctx.moveTo(sx,sy);
this.ctx.lineTo(ex,ey);
this.ctx.stroke();
this.ctx.restore();
},
createCanvas : function(){
var canvas = document.createElement("CANVAS");
canvas.innerHTML = "您的浏览器不支持canvas,赶紧换一个吧";
$(this.option.element).appendChild(canvas);
canvas.width = parseInt($(this.option.element).style.width);
canvas.height = parseInt($(this.option.element).style.height);
return canvas;
}
}

return init;
}(jquery || {}));

window.onload = function(){
var option = {
element : "canvas"
}
new test(option);
}

</script>