                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /學(xué)寫一個字

線條出了問題，求解決

出了什么問題，線條有時候是細(xì)的，有時候是粗的

<!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>