canvas-绘制虚线

来源：互联网发布：杰西平克曼知乎编辑：程序博客网时间：2024/06/05 18:05
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>canvas-绘制虚线</title>    <style>        #canvas{            border: 1px solid red;            <!-- background-color:red; -->        }    </style></head><body>    <canvas id="canvas" width="500px" height="500px">    </canvas>    <script>        //获取到canvas元素        var canvas = document.getElementById('canvas');        //获取canvas中的画图环境        var context = canvas.getContext('2d');        /* 绘制虚线：        * context 绘制画布环境对象        * sx 开始位置 - X坐标        * sy 开始位置 - Y坐标        * ex 结束位置 - X坐标        * ey 结束位置 - Y坐标        * length 虚线的单位长度        * */        function dottedLinTo(context,sx,sy,ex,ey,length){            var w = ex - sx; //获取线条的水平宽度            var h = ey - sy; //获取线条的垂直高度            var l = Math.sqrt(w*w + h*h); // 获取线条的长度            var index = Math.floor(l/length); //获取虚线的个数            for(var i=0;i<index;i++){                if(i%2==0){                    context.moveTo(sx+w/index*i,sy+h/index*i);                }else{                    context.lineTo(sx+w/index*i,sy+h/index*i);                }            }            context.stroke();        }        dottedLinTo(context,10,10,400,400,5);        dottedLinTo(context,400,10,10,400,5);        dottedLinTo(context,10,10,400,10,5);        dottedLinTo(context,400,10,400,400,5);        dottedLinTo(context,400,400,10,400,5);        dottedLinTo(context,10,400,10,10,5);    </script></body></html>
0 0