canvas的画笔只有一根

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #cas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <canvas id="cas" width="800" height="600"></canvas>
    <script>
        //只有一个画笔，颜色各种属性变了，后面的代码都会保持这种属性
        var cas = document.querySelector('#cas')
        var ctx = cas.getContext('2d')
        ctx.strokeStyle = 'green';
        ctx.lineWidth = 12;
        ctx.setLineDash([40, 30, 20]);
        ctx.moveTo(200, 300);
        ctx.lineTo(900, 300);
        ctx.stroke();

        ctx.beginPath();
        ctx.strokeStyle = 'black'
        ctx.setLineDash([])
        ctx.moveTo(200, 500);
        ctx.lineTo(900, 500);
        ctx.stroke();
    </script>
</body>

</html>
zhengwei1949 / myblog

canvas的画笔只有一根 #104
