自己试下练练手，然后写出了bug，一直找不到原因，麻烦帮我看看
自己试下练练手，然后写出了bug，一直找不到原因，麻烦帮我看看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>如何绘制折线图</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
<style type="text/css" media="screen">
*{margin:0;padding:0;}
div{margin:0 auto;width:300px;height:300px;background:pink}
</style>
</head>
<body id='body'>
<div id='div'>
<canvas id='canvas' width="300px" height="300px">
</canvas>
</div>
<script type="text/javascript">
var ret= function(arr){
var res=[arr[0]];
for(var j=1;j<arr.length;j++){
var repeat= false;
for(var i=0;i<res.length;i++){
if(arr[j]==res[i]){
repeat=true;
break;
}
}
if(!repeat){
res.push(arr[j]);
}
}
return res;
}
var canvasRoll=document.getElementById('canvas');
var screenWidth=Math.floor((window.innerWidth-canvasRoll.width)/2);
var po={};
var posi=[];
var ctx=canvasRoll.getContext('2d');
var checked=false;
var remober=[];
window.r=Math.floor(canvasRoll.width/14);
var index=[],indexed;
arct();
function test2(e){
if(checked)
{ ctx.clearRect(0,0,canvasRoll.width,canvasRoll.height);
arct();
ctx.arc(posi[indexed].xcount,posi[indexed].ycount,10,0,Math.PI*2,true);
ctx.fill();
ctx.beginPath();
var nowposition={};
nowposition.x=Math.floor(e.touches[0].clientX)-screenWidth;
nowposition.y=Math.floor(e.touches[0].clientY);
if(remober.length==1){
ctx.moveTo(posi[indexed].xcount,posi[indexed].ycount);
ctx.lineTo(nowposition.x,nowposition.y);
ctx.stroke();ctx.beginPath();
}
else if(remober.length>1){
ctx.moveTo(posi[remober[remober.length-1]].xcount,posi[remober[remober.length-1]].ycount);
ctx.lineTo(nowposition.x,nowposition.y);
ctx.stroke();ctx.beginPath();
}
for(var s=0;s<remober.length;s++){
ctx.arc(posi[remober[s]].xcount,posi[remober[s]].ycount,10,0,Math.PI*2,true);
ctx.fill();
ctx.beginPath();
ctx.moveTo(posi[remober[s]].xcount,posi[remober[s]].ycount);
if(remober.length!=s+1){
ctx.lineTo(posi[remober[s+1]].xcount,posi[remober[s+1]].ycount);
}else{ctx.lineTo(posi[remober[s]].xcount,posi[remober[s]].ycount);}
ctx.stroke()
ctx.beginPath();
}
for(var i=0;i<posi.length;i++)
{
if(nowposition.x>=posi[i].xcount-r&&nowposition.x<=posi[i].xcount+r&&nowposition.y>=posi[i].ycount-r&&nowposition.y<=posi[i].ycount+r)
{ ctx.arc(posi[i].xcount,posi[i].ycount,10,0,Math.PI*2,true);
ctx.fill();
ctx.beginPath();
remober.push(i);
remober=ret(remober);
console.log(remober)
ctx.beginPath();
}
}
}
}
div.addEventListener('touchstart',test,false);
div.addEventListener('touchmove',test2,false);
div.addEventListener('touchend',test3,false);
function test3(){ ctx.clearRect(0,0,canvasRoll.width,canvasRoll.height);arct();
indexed=undefined;
remober.length=0;
checked=false;
}
function arct(){
posi.length=0;
for(var i=3;i<=11;i+=4)
{for(a=3;a<=11;a+=4)
{ ctx.arc(r*a,r*i,r,0,Math.PI*2,true);
ctx.stroke();
ctx.beginPath();
posi.push({'xcount':a*r,'ycount':i*r})
}
}}
function test(e){
ctx.clearRect(0,0,canvasRoll.width,canvasRoll.height);
arct();
po.x=Math.floor(e.touches[0].clientX)-screenWidth;
po.y=Math.floor(e.touches[0].clientY);
for(var i=0;i<posi.length;i++)
{
if(po.x>=posi[i].xcount-r&&po.x<=posi[i].xcount+r&&po.y>=posi[i].ycount-r&&po.y<=posi[i].ycount+r)
{ ctx.arc(posi[i].xcount,posi[i].ycount,10,0,Math.PI*2,true);
index[0]=i;
indexed=i;
ctx.fill();
ctx.beginPath();
checked=true;}
} }
//
</script>
</body>
</html>1
收起
正在回答 回答被采纳积分+1
1回答
相似问题
登录后可查看更多问答，登录/注册
组件化思想开发电商网页 18版
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星