canvas-绘制虚线

最新推荐文章于 2024-06-03 16:55:57 发布

十里夜

最新推荐文章于 2024-06-03 16:55:57 发布

阅读量2.3k

点赞数

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

本文链接：https://blog.csdn.net/hgyu_962464/article/details/54893164

版权

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

最低0.47元/天解锁文章

十里夜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas-绘制虚线

canvas-绘制虚线 #canvas{ border: 1px solid red; } //获取到canvas元素 var canvas = document.getElementById('canvas');
复制链接

扫一扫

专栏目录