2.8.5_虚线的绘制

来源：互联网发布：麟龙选股软件编辑：程序博客网时间：2024/06/08 03:40
2.8.5_虚线的绘制

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>橡皮筋式的线条绘制</title>        <style>            body{                background: #eee;            }            #canvas{                background: #fff;                cursor: pointer;                margin-left: 10px;                margin-top: 10px;                box-shadow: 4px 4px 8px rgba(0,0,0,0.5);                -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);                -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);            }        </style>    </head>    <body>        <canvas id="canvas" width="600" height="400"></canvas>    </body>    <script>        var canvas = document.getElementById('canvas'),            context = canvas.getContext('2d');        context.lineWidth = 3;        context.strokeStyle = 'blue';        drawDashLine(context,20,20,context.canvas.width-20,80,10);        function drawDashLine(context,x1,y1,x2,y2,dashLength){            dashLength = dashLength ===undefined? 5:dashLength;            var deltaX =x2-x1;            var deltaY = y2-y1;            var numDashes = Math.floor(Math.sqrt(deltaX*deltaX+deltaY*deltaY)/dashLength); //虚线的数量            for(var i=0;i<numDashes;i++){                context[i%2===0? 'moveTo':'lineTo'](x1+(deltaX/numDashes)*i,y1+(deltaY/numDashes)*i);            }            context.stroke();        }    </script></html>
0 0