canvas描边样式-setLineDash-虚线

最新推荐文章于 2024-01-11 00:00:00 发布

书院二层楼

最新推荐文章于 2024-01-11 00:00:00 发布

阅读量746

点赞数

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

本文链接：https://blog.csdn.net/caoxinjian423/article/details/109514305

版权

JS 同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

canvas

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas描边样式-setLineDash</title>
    <style>
        html{height: 100%;overflow: hidden;}
        body{height: 100%;margin: 0;}
        #test{
            background: antiquewhite;
        }
    </style>
</head>
<body>
    <canvas id="test"></canvas>
<script>
    const cvs=document.getElementById('test');
    cvs.width=window.innerWidth;
    cvs.height=window.innerHeight;

    const  ctx=cvs.getContext('2d');

    /*strokeStyle：描边的着色样式*/
    ctx.strokeStyle='maroon';

    /*lineWidth：描边宽*/
    ctx.lineWidth=4;

    /* setLineDash(segments) 虚线 */
    ctx.save();
    ctx.setLineDash([30,60,90]);
    ctx.beginPath();
    ctx.moveTo(50,100);
    ctx.lineTo(700,100);
    ctx.stroke();
    ctx.restore();

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

书院二层楼

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas描边样式-setLineDash-虚线

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas描边样式-setLineDash</title> <style> htm.
复制链接

扫一扫