刷頭條的時候看到頭條的重繪進度條不錯，就自己做了一個，看一下效果：
看到這個就會想到怎么去實作呢？
- 繪制方形（用4條線段的方式來繪制），不直接繪制方形，
- 控制右上角往下運動，同時右下角往上運動（改變Y左邊即可），
- 右邊的運動完以后，停止右邊，讓左上角往下，左下角也往上運動，
- 左邊運動完成后，停止左邊，啟動右邊，重復此程序，
先來寫好繪制方形的函式
//建構式
function DynamicRectangle(o){
this.x=0,//原點坐標X
this.y=0,//原點坐標Y
this.x1=0,//X1坐標
this.y1=0,//Y1坐標
this.x2=0,//X2坐標
this.y2=0,//Y2坐標
this.x3=0,//X3坐標
this.y3=0,//Y3坐標
this.x4=0,//X4坐標
this.y4=0,//Y4坐標
this.init(o);
}
//初始化
DynamicRectangle.prototype.init=function(o){
for(var key in o){
this[key]=o[key];
}
}
//繪制線條
DynamicRectangle.prototype.drawLine=function(ctx,startX,startY,endX,endY){
ctx.save();
ctx.beginPath();
ctx.translate(this.x,this.y);//設定原點坐標
ctx.moveTo(startX,startY);
ctx.lineTo(endX,endY);
if(this.lineWidth){//線寬
ctx.lineWidth=this.lineWidth;
}
if(this.lineCap){
ctx.lineCap=this.lineCap;//線帽
}
if(this.stroke){//描邊
this.strokeStyle?(ctx.strokeStyle=this.strokeStyle):null;
ctx.stroke();
}
ctx.restore();
}
//繪制
DynamicRectangle.prototype.render=function(context){
var ctx=context;
//繪制好4條線段
this.drawLine(ctx,this.x1,this.y1,this.x2,this.y2);//上邊線
this.drawLine(ctx,this.x2,this.y2,this.x3,this.y3);//右邊線
this.drawLine(ctx,this.x3,this.y3,this.x4,this.y4);//下邊線
this.drawLine(ctx,this.x4,this.y4,this.x1,this.y1);//左邊線
return this;
}來生成一個方形
//創建方形
var rect = new DynamicRectangle({
x:7,//原點坐標x
y:2,//原點坐標y
x1:0,//方形左上角坐標x
y1:0,//方形左上角坐標y
x2:100,//方形右上角坐標x
y2:0,//方形右上角坐標y
x3:100,//方形右下角坐標x
y3:60,//方形右下角坐標y
x4:0,//方形左下角坐標x
y4:60,//方形左下角坐標y
lineWidth:1.5,//線寬
lineCap:'square',//線帽
stroke:true,//描邊
strokeStyle:'palevioletred',//線的顏色
}).render(ctx);效果如下：
如何動起來呢，先來看右邊，要做到右上角往下運動，只要使右上角的Y坐標增加就可以，加入定時函式，重復的去增加右上角的Y坐標，再重新繪制出來
var dir=1;//方向
var dis=2;//X軸移動初始值
move=function(){
//清理畫布
ctx.clearRect(0,0,W,H);
rect.y2+=dis*dir;
rect.render(ctx);
}
timmer=setInterval(move,10);//開始任務此時的效果是這樣的
但是會一直往下走，所以要限定方向，到達底部后折返往上，并且回到頂部后再次調整方向往下，在move函式里面調整一下即可：
move=function(){
//清理畫布
ctx.clearRect(0,0,W,H);
rect.y2+=dis*dir;
rect.render(ctx);
if(rect.y2>=60||rect.y2<=0){
dir=-dir;//改變方向
}
}
加入右下角的運動
move=function(){
//清理畫布
ctx.clearRect(0,0,W,H);
rect.y2+=dis*dir;
rect.y3+=-dis*dir;
rect.render(ctx);
if(rect.y2>=60||rect.y2<=0||rect.y3>=60||rect.y3<=0){
dir=-dir;//改變方向
}
}
再把左邊加入運動，因為右邊運動完后切換到左邊，左邊運動完停止，右邊再運動，需要加入一個引數來控制，
move=function(){
//清理畫布
ctx.clearRect(0,0,W,H);
if(animateDir=='right'){//長方形的右邊在運動
rect.y2+=dis*dir;
rect.y3+=-dis*dir;
}else{//長方形的左邊在運動
rect.y1+=dis*dir2;
rect.y4+=-dis*dir2;
}
rect.render(ctx);
if(animateDir=='right'){
if(rect.y2>=60||rect.y2<=0||rect.y3>=60||rect.y3<=0){
dir=-dir;
animateDir='left';//切換為左邊運動
}
}else{
if(rect.y1>=60||rect.y1<=0||rect.y4>=60||rect.y4<=0){
dir2=-dir2;
animateDir='right';//切換為右邊運動
}
}
}此時效果如下：
加快一下速度，timmer=setInterval(move,10);
把這些都封裝一下，再看一下效果
完整代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="GBK">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<button onclick='start()'>開始</button>
<button onclick='stop()'>結束</button>
<div id='process'>
</div>
<script type="text/javascript">
var timmer=null;
function start(){
if(timmer) return ;//防止重復點擊
var process = document.getElementById('canvasDiv');
process.style.display="block";
timmer=setInterval(move,10);//開始任務
}
function stop(){
var process = document.getElementById('canvasDiv');
process.style.display="none";
clearInterval(timmer); //結束任務
timmer=null;
}
//建構式
function DynamicRectangle(o){
this.x=0,//原點坐標X
this.y=0,//原點坐標Y
this.x1=0,//X1坐標
this.y1=0,//Y1坐標
this.x2=0,//X2坐標
this.y2=0,//Y2坐標
this.x3=0,//X3坐標
this.y3=0,//Y3坐標
this.x4=0,//X4坐標
this.y4=0,//Y4坐標
this.order=0,
this.init(o);
}
//初始化
DynamicRectangle.prototype.init=function(o){
for(var key in o){
this[key]=o[key];
}
}
//繪制線條
DynamicRectangle.prototype.drawLine=function(ctx,startX,startY,endX,endY){
ctx.save();
ctx.beginPath();
ctx.translate(this.x,this.y);//設定原點坐標
ctx.moveTo(startX,startY);
ctx.lineTo(endX,endY);
if(this.lineWidth){//線寬
ctx.lineWidth=this.lineWidth;
}
if(this.lineCap){
ctx.lineCap=this.lineCap;//線帽
}
if(this.stroke){//描邊
this.strokeStyle?(ctx.strokeStyle=this.strokeStyle):null;
ctx.stroke();
}
ctx.restore();
}
//繪制
DynamicRectangle.prototype.render=function(context){
var ctx=context;
//繪制好4條線段
this.drawLine(ctx,this.x2,this.y2,this.x3,this.y3);//右邊線
this.drawLine(ctx,this.x4,this.y4,this.x1,this.y1);//左邊線
if(this.order>0){//先繪制上面那條邊
this.drawLine(ctx,this.x1,this.y1,this.x2,this.y2);//上邊線
this.drawLine(ctx,this.x3,this.y3,this.x4,this.y4);//下邊線
}else{先繪制下面那條邊
this.drawLine(ctx,this.x3,this.y3,this.x4,this.y4);//下邊線
this.drawLine(ctx,this.x1,this.y1,this.x2,this.y2);//上邊線
}
return this;
}
createCanvas();
var move;
function createCanvas(){
var process = document.getElementById('process');
var div = document.createElement('div');
div.id="canvasDiv";
div.style.cssText="position:absolute;top:50px;left:30px;display:none;";
var canvas = document.createElement('canvas');
var W = canvas.width = 114;
var H = canvas.height = 64;
div.appendChild(canvas);
process.appendChild(div);
var ctx = canvas.getContext('2d');
//創建方形
var rect = new DynamicRectangle({
x:7,//原點坐標x
y:2,//原點坐標y
x1:0,//方形左上角坐標x
y1:0,//方形左上角坐標y
x2:100,//方形右上角坐標x
y2:0,//方形右上角坐標y
x3:100,//方形右下角坐標x
y3:60,//方形右下角坐標y
x4:0,//方形左下角坐標x
y4:60,//方形左下角坐標y
lineWidth:1.5,//線寬
lineCap:'square',//線帽
stroke:true,//描邊
strokeStyle:'palevioletred',//線的顏色
order:1//繪制順序
}).render(ctx);
var dir=1;//方向
var dir2=1;//方向2
var dis=2;//X軸移動初始值
var animateDir='right';
move=function(){
//清理畫布
ctx.clearRect(0,0,W,H);
if(animateDir=='right'){
rect.y2+=dis*dir;
rect.y3+=-dis*dir;
}else{
rect.y1+=dis*dir2;
rect.y4+=-dis*dir2;
}
rect.render(ctx);
if(animateDir=='right'){
if(rect.y2>=60||rect.y2<=0||rect.y3>=60||rect.y3<=0){
dir=-dir;
animateDir='left';
if(dir<0){
rect.order=-1;
}else{
rect.order=1;
}
}
}else{
if(rect.y1>=60||rect.y1<=0||rect.y4>=60||rect.y4<=0){
dir2=-dir2;
animateDir='right';
if(dir2<0){
rect.order=-1;
}else{
rect.order=1;
}
}
}
}
}
</script>
</body>
</html>
稍作改造就可以用起來，給個三連吧兄弟們！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/256441.html
標籤：其他