线条出了问题，求解决-慕课网

线条出了问题，求解决

来源：1-1 学写一个字，继续canvas绘图之旅

初学Web3995664

2016-11-05 14:06

出了什么问题，线条有时候是细的，有时候是粗的

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

写回答关注