有没有js大神啊，求助js算法 105
我要做的就是类似图片的效果，先进去的先出来，但是我是用canvas画图，所以第一个需要把后面的都加起来计算开始的位置，我的逻辑可能有点烂，有不明白的地方可以随时交流<ca...
我要做的就是类似图片的效果，先进去的先出来，但是我是用canvas画图，所以第一个需要把后面的都加起来计算开始的位置，我的逻辑可能有点烂，有不明白的地方可以随时交流 <canvas id="myCanvas" style="border:1px solid blue;margin:100px;" height="400" width="300"></canvas><script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d');//这里是data，见下面 drawImg(); var startY = 30,num=0,arr=[]; var timer=setInterval(function () { ctx.clearRect(0, 0, 400, 400); drawImg(); arr.push(data[num].len); //start; for (var j = 0; j < arr.length; j++) { startY = 10; for (var i = 0; i < arr.length -1 - j; i++) { startY += arr[arr.length - 1 - i]; if (startY > 100) { arr.shift(); //当startY大于100的时候，arr数组中的第一个元素去掉，然后从新开始循环，就是从start那里从新走一遍，这是我的思路，如果你有好的思路也可以 } } //if (startY > 100) { // arr.shift(); // data.shift();//这种貌似可以实现，当我需要上面的解法，这种放到项目中是行不通的 // num--; // continue; //} else { console.log(startY) //console.log(j) ctx.save(); ctx.beginPath(); ctx.strokeStyle = data[j].color; ctx.translate(20, 19); ctx.lineWidth = 38; ctx.moveTo(50, startY); ctx.lineTo(50, startY + arr[j]); ctx.fillStyle = "red"; ctx.fillText(data[j].color, 90, startY + 10);//暂时的标记 ctx.closePath; ctx.stroke(); ctx.restore(); // } } num++; // console.log(num) if (num == 4) { //clearInterval(timer); } }, 1000) function drawImg() { ctx.beginPath(); ctx.moveTo(50, 30); ctx.lineTo(50, 100); ctx.moveTo(90, 30); ctx.lineTo(90, 100); ctx.closePath(); ctx.stroke(); }</script>
大家可以把下面的代码拷过去修改，下面是我自己写的，谢谢啦 展开
大家可以把下面的代码拷过去修改，下面是我自己写的，谢谢啦 展开
1个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="script/jquery-1.10.0.js"></script>
<style>
html, body {
height:100%;
width:100%;
}
* {
padding:0;
margin:0;
}
</style>
</head>
<body>
<canvas id="myCanvas" style="border:1px solid blue;margin:100px;" height="400" width="300"></canvas>
</body>
</html>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var data = [{ len: 6, color: 'red' }, { len: 7, color: 'yellow' }, { len: 8, color: 'blue' }, { len: 6, color: 'red' }, { len: 6, color: 'skyblue' }, { len: 6, color: 'red' }, { len: 7, color: 'yellow' }, { len: 8, color: 'blue' }, { len: 6, color: 'red' }, { len: 6, color: 'skyblue' }, { len: 6, color: 'red' }, { len: 7, color: 'yellow' }, { len: 8, color: 'blue' }, { len: 6, color: 'black' }, { len: 6, color: 'skyblue' }, { len: 6, color: 'red' }, { len: 7, color: 'yellow' }, { len: 8, color: 'blue' }, { len: 6, color: 'red' }, { len: 6, color: 'skyblue' }, { len: 6, color: 'red' }, { len: 7, color: 'yellow' }, { len: 8, color: 'blue' }, { len: 6, color: 'red' }, { len: 6, color: 'skyblue' }, { len: 6, color: 'red' }, { len: 7, color: 'yellow' }, { len: 8, color: 'blue' }, { len: 6, color: 'red' }, { len: 6, color: 'skyblue' }, { len: 6, color: 'red' }, { len: 7, color: 'yellow' }, { len: 8, color: 'blue' }, { len: 6, color: 'red' }, { len: 6, color: 'skyblue' }, { len: 6, color: 'red' }, { len: 7, color: 'yellow' }, { len: 8, color: 'blue' }, { len: 6, color: 'red' }, { len: 6, color: 'skyblue' }, { len: 6, color: 'red' }, { len: 7, color: 'yellow' }, { len: 8, color: 'blue' }, { len: 6, color: 'red' }, { len: 6, color: 'skyblue' }, { len: 6, color: 'red' }, { len: 7, color: 'yellow' }, { len: 8, color: 'blue' }, { len: 6, color: 'red' }, { len: 6, color: 'skyblue' }, { len: 6, color: 'red' }, { len: 7, color: 'yellow' }, { len: 8, color: 'blue' }, { len: 6, color: 'red' }, { len: 6, color: 'skyblue' }, { len: 6, color: 'red' }, { len: 7, color: 'yellow' }, { len: 8, color: 'blue' }, { len: 6, color: 'red' }, { len: 6, color: 'skyblue' }, { len: 6, color: 'red' }, { len: 7, color: 'yellow' }, { len: 8, color: 'blue' }, { len: 6, color: 'red' }, { len: 6, color: 'skyblue' }, { len: 6, color: 'red' }, { len: 7, color: 'yellow' }, { len: 8, color: 'blue' }, { len: 6, color: 'red' }, { len: 6, color: 'skyblue' }, { len: 6, color: 'red' }, { len: 7, color: 'yellow' }, { len: 8, color: 'blue' }, { len: 6, color: 'red' }, { len: 6, color: 'skyblue' }];
drawImg();
var startY = 30,num=0,arr=[];
var timer=setInterval(function () {
ctx.clearRect(0, 0, 400, 400);
drawImg();
arr.push(data[num].len);
//start;
for (var j = 0; j < arr.length; j++) {
startY = 10;
for (var i = 0; i < arr.length -1 - j; i++) {
startY += arr[arr.length - 1 - i];
if (startY > 100) {
arr.shift();
//当startY大于100的时候，arr数组中的第一个元素去掉，然后从新开始循环，就是从start那里从新走一遍
}
}
//if (startY > 100) {
// arr.shift();
// data.shift();//这种貌似可以实现，当我需要上面的解法，这种放到项目中是行不通的
// num--;
// continue;
//} else {
console.log(startY)
//console.log(j)
ctx.save();
ctx.beginPath();
ctx.strokeStyle = data[j].color;
ctx.translate(20, 19);
ctx.lineWidth = 38;
ctx.moveTo(50, startY);
ctx.lineTo(50, startY + arr[j]);
ctx.fillStyle = "red";
ctx.fillText(data[j].color, 90, startY + 10);//暂时的标记
ctx.closePath;
ctx.stroke();
ctx.restore();
// }
}
num++;
// console.log(num)
if (num == 4) {
//clearInterval(timer);
}
}, 1000)
function drawImg() {
ctx.beginPath();
ctx.moveTo(50, 30);
ctx.lineTo(50, 100);
ctx.moveTo(90, 30);
ctx.lineTo(90, 100);
ctx.closePath();
ctx.stroke();
}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
