线条出了问题，求解决
出了什么问题，线条有时候是细的，有时候是粗的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>write</title>
<style>
canvas{display: block;margin: 0 auto;}
.controller{width: 600px;margin: 0 auto;}
.controller>div{float: left;margin: 10px 10px 0 0;
border: 5px solid white;width: 40px;height: 40px;
border-radius: 5px;cursor: pointer;}
.controller .clearBtn{float: right;margin: 10px 0 0 10px;
border: 2px solid #aaa;width: 80px;
height: 22px;line-height: 40px;text-align: center;
background-color: white;font: bold 20px 'Microsoft';}
.clearBtn:hover{background: #def;}
.controller:after{content: '';display: block;clear: both;}
.black{background:black;}
.blue{background: blue;}
.green{background: green;}
.red{background: red;}
.orange{background: orange;}
.yellow{background: yellow;}
</style>
</head>
<body>
<div>
<canvas id="canvas"></canvas>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>清除</div>
</div>
<script>
var canvasWidth=600;
var canvasHeight=canvasWidth;
var isMouseDown=false;
var lastLoc={x:0,y:0};
var lastTimestamp=0;
var lastLineWidth=-1;
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
canvas.width=canvasWidth;
canvas.height=canvasHeight;
drawGrid();
var clearBtn=document.querySelector('.clearBtn');
clearBtn.addEventListener('click',function(){
context.clearRect(0,0,canvasWidth,canvasHeight);
drawGrid();
},false)
canvas.addEventListener('mousedown',function(e){
e.preventDefault();
isMouseDown=true;
lastLoc=windowToCanvase(e.clientX,e.clientY);
lastTimestamp=new Date().getTime();
},false)
canvas.addEventListener('mouseup',function(e){
e.preventDefault();
isMouseDown=false;
},false)
canvas.addEventListener('mouseout',function(e){
e.preventDefault();
isMouseDown=false;
},false)
canvas.addEventListener('mousemove',function(e){
e.preventDefault();
if(isMouseDown){
//draw
var curLoc=windowToCanvase(e.clientX,e.clientY);
var curTimestamp=new Date().getTime();
var s=calcDistance(curLoc,lastLoc);
var t=curTimestamp-lastTimestamp;
var lineWidth=calcLineWidth(t,s);
context.beginPath();
context.moveTo(lastLoc.x,lastLoc.y);
context.lineTo(curLoc.x,curLoc.y);
context.strokeStyle='black';
context.lineWidth=lineWidth;
context.lineCap='round';
context.lineJoin='round';
context.stroke();
lastLoc=curLoc;
lastTimestamp=curTimestamp;
lastLineWidth=lineWidth;
}
},false)
var maxLineWidth=30;
var minLineWidth=3;
var maxStrokeV=10;
var minStrokeV=.5;
function calcLineWidth(t,s){
var v=s/t;
var resultLineWidth=0;
if(v<=minStrokeV){
resultLineWidth=maxLineWidth;
}else if(v>=maxStrokeV){
resultLineWidth=minLineWidth;
}else{
resultLineWidth=maxLineWidth-(v-minStrokeV)*
(maxLineWidth-minLineWidth)/(maxStrokeV-minStrokeV);
}
if(lastLineWidth==-1){
return resultLineWidth
}
return lastLineWidth*3/5+resultLineWidth*2/5;
}
function calcDistance(loc1,loc2){
return Math.sqrt((loc1.x-loc2.x)*(loc1.x-loc2.x)+
(loc1.y-loc2.y)*(loc1.y-loc2.y))
}
function windowToCanvase(x,y){
var bbox=canvas.getBoundingClientRect();
return {x:Math.round(x-bbox.left), y:Math.round(y-bbox.top)}
}
function drawGrid(){
context.save();
context.strokeStyle='rgba(230,11,9,.8)';
context.beginPath();
context.moveTo(0,0);
context.lineTo(canvasWidth,canvasHeight);
context.moveTo(canvasWidth,0);
context.lineTo(0,canvasHeight);
context.moveTo(canvasWidth/2,0);
context.lineTo(canvasWidth/2,canvasHeight);
context.moveTo(0,canvasHeight/2);
context.lineTo(canvasWidth,canvasHeight/2);
context.lineWidth=1;
context.stroke();
context.beginPath();
context.moveTo(3,3);
context.lineTo(canvasWidth-3,3);
context.lineTo(canvasWidth-3,canvasHeight-3);
context.lineTo(3,canvasHeight-3);
context.closePath()
context.lineWidth=6;
context.stroke();
context.restore();
}
</script>
</body>
</html>
