canvas-绘制虚线

最新推荐文章于 2024-08-18 02:27:21 发布

十里夜

最新推荐文章于 2024-08-18 02:27:21 发布

阅读量2.4k

点赞数

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.youkuaiyun.com/hgyu_962464/article/details/54893164

版权

canvas 专栏收录该内容

13 篇文章

订阅专栏

这篇博客展示了如何在HTML5的canvas中利用JavaScript绘制虚线。通过获取canvas元素和2D绘图环境，定义了一个名为dottedLinTo的函数，该函数接受起点和终点坐标，以及虚线的单位长度作为参数，实现不同方向上的虚线绘制。示例中绘制了多个方向的虚线，展示了其灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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