html5 canvas 绘制虚线

作者: antlove | 来源:发表于2018-12-15 14:35 被阅读0次

html5 canvas 绘制虚线
canvas绘制虚线，虚线方框，虚线圆
flutter draw虚线问题
canvas虚线绘制
HTML5 - Canvas
14-JS canvas 学习
1.canvas基础(1)
canvas-绘制虚线
Canvas绘制虚线矩形
前端知识梳理-1/Canvas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制虚线</title>
    <style>
        body{
            background-color:#eee;
        }
        #canvas{
            background-color:#fff;
            margin-left:10px;
            margin-top:10px;
            -webkit-box-shadow:4px 4px 8px rgba(0,0,0,0.5);
            -moz-box-shadow:4px 4px 8px rgba(0,0,0,0.5);
            -box-shadow:4px 4px 8px rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>

    <canvas id="canvas" width="800" height="600"></canvas>

    <script>
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        context.lineWidth = 1;
        context.strokeStyle = "red";

        /**
        * context 绘图环境
        * x1 起始点 x轴坐标
        * y1 起始点 y轴坐标
        * x2 目标点 x轴坐标
        * y2 目标点 y轴坐标
        * dashed 虚线长度
        * gapLength 间隔长度
        */
        function drawLine(context,x1,y1,x2,y2,dashedLength,gapLength){
            var deltaX = x2-x1;
            var deltaY = y2-y1;
            var angle = Math.atan(Math.abs(deltaX/deltaY));
            var sin = Math.sin(angle);
            var cos = Math.cos(angle);
            var lineWidth = Math.sqrt(deltaX*deltaX+deltaY*deltaY);
            dashedLength = dashedLength||1;
            gapLength = gapLength||0;
            var curX = x1;
            var curY = y1;
            while(lineWidth>0){
               context.beginPath();
               context.moveTo(curX,curY);
               context.lineTo(Math.min(curX+sin*dashedLength,x2),Math.min(curY+cos*dashedLength,y2));
               context.stroke();
               lineWidth-=dashedLength;
               lineWidth-=gapLength;
               curX = curX+sin*(dashedLength+gapLength);
               curY = curY+cos*(dashedLength+gapLength);
            }
        }

        drawLine(context,100,100.5,500,100.5,20,10);
        drawLine(context,100,102.5,500,102.5);

        drawLine(context,100,105,500,105,10,10);
        drawLine(context,100,105,500,505.5,10,20);

    </script>
</body>
</html>

虚线.png