怎样设置线的宽度

需要使用: ctx.lineWidth 属性; 它默认为1.0, 不能是负数.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <canvas id="canv" width="300" height="300"></canvas>
    <script>
        function draw(){
            var canvas = document.getElementById("canv");
            if (!canvas.getContext) return;
            var ctx = canvas.getContext("2d");

            ctx.beginPath();
            ctx.moveTo(30, 150);
            ctx.lineTo(60, 150);
            ctx.lineWidth = 3;
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(60, 150);
            ctx.lineTo(90, 150);
            ctx.lineWidth = 6;
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(90, 150);
            ctx.lineTo(120, 150);
            ctx.lineWidth = 9;
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(120, 150);
            ctx.lineTo(150, 150);
            ctx.lineWidth = 12;
            ctx.stroke();
        }
        draw();
    </script>
</body>

</html>

 

 

posted on 2019-09-23 16:10  aisowe  阅读(538)  评论(0)  编辑  收藏  举报

导航