单独设置线宽

来源：4-1 Canvas图形变换之平移

xiaorenwu029

2017-11-28 20:22:21

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        canvas{background-color:lightblue;}
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="800">
        您的浏览器不支持canvas
    </canvas>
    
    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        ctx.beginPath();
        ctx.fillStyle = "rgba(255,144,144,0.8)";
        ctx.strokeRect(320,150,160,100);
        ctx.fillRect(320,150,160,100);
        ctx.fillStyle = "rgba(255,0,0,0.8)";
        ctx.strokeRect(370,220,60,20);
        ctx.fillRect(370,220,60,20);


        ctx.fillStyle = "rgba(255,255,0,0.8)";
        ctx.strokeRect(300,180,20,40);
        ctx.fillRect(300,180,20,40);
        ctx.strokeRect(480,180,20,40);
        ctx.fillRect(480,180,20,40);

        ctx.fillStyle = "rgba(255,66,66,0.8)";
        ctx.strokeRect(340,250,120,160);
        ctx.fillRect(340,250,120,160);

        ctx.beginPath()
        ctx.fillStyle = "rgba(0,255,255,0.8)";
        ctx.strokeRect(360,410,20,160);
        ctx.fillRect(360,410,20,160);
        ctx.strokeRect(420,410,20,160);
        ctx.fillRect(420,410,20,160);
        ctx.strokeRect(180,310,160,20);
        ctx.fillRect(180,310,160,20);
        ctx.strokeRect(460,310,160,20);
        ctx.fillRect(460,310,160,20);

        ctx.beginPath();
        ctx.fillStyle = "rgba(0,0,0,0,8)";
        ctx.arc(360,180,10,0,2*Math.PI,true);
        ctx.stroke();
        ctx.fill();
        ctx.beginPath();
        ctx.arc(440,180,10,0,2*Math.PI,true);
        ctx.stroke();
        ctx.fill();

        ctx.beginPath();
        ctx.lineWidth = "5";
        ctx.strokeStyle = "#9f0";
        ctx.moveTo(360,150);
        ctx.lineTo(320,50);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(440,150);
        ctx.lineTo(480,50);
        ctx.stroke();
    </script>
</body>

</html>

假如我想在开始就画这个线的话，设置了线宽后发现下面的矩形等的线宽都变大了，这里我怎么设置线宽才能不影响后面的线宽，还是说我设置线宽之后让开始的两个线宽变宽之后再把这个线宽重新设置为默认的1？请答复

写回答

1回答