2.8.5_虚线的绘制

最新推荐文章于 2023-08-15 22:07:31 发布

信封中的阳光

最新推荐文章于 2023-08-15 22:07:31 发布

阅读量411

点赞数

分类专栏： HTML5_CANVAS练习案例

本文链接：https://blog.csdn.net/jun_sun_shine/article/details/71078142

版权

HTML5_CANVAS练习案例专栏收录该内容

81 篇文章 1 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
0
评论
2.8.5_虚线的绘制

2.8.5_虚线的绘制<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>橡皮筋式的线条绘制</title> <style> body{ background: #eee; }
复制链接

扫一扫