请问我设置了天线的线宽以后，后面的线宽怎么恢复默认，后面写了beginPath（）呀？

来源：3-11 编程练习

鲨鱼没有鲨鱼线

2020-03-19 23:59:05

<!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 rob = document.getElementById('canvas');
        var side1 = rob.getContext("2d");
        var side2 = rob.getContext("2d");
        var side3 = rob.getContext("2d");
        var side4 = rob.getContext("2d");
        var side5 = rob.getContext("2d");
        var side6 = rob.getContext("2d");
        var side7 = rob.getContext("2d");
        var side8 = rob.getContext("2d");
        var side9 = rob.getContext("2d");
        var side10 = rob.getContext("2d");
        var side11 = rob.getContext("2d");
        var side12 = rob.getContext("2d");
        var side13 = rob.getContext("2d");

        //左天线
        side1.moveTo(300,100);
        side1.lineTo(350,200);
        side1.lineWidth = 5 ;
        side1.strokeStyle = "#ff0";
        side1.stroke();

        //右天线
        side2.beginPath();
        side2.moveTo(500,100);
        side2.lineTo(450,200);
        side2.lineWidth = 5;
        side2.strokeStyle = "#0ff";
        side2.stroke();

        //左耳朵
        side3.beginPath();
        side3.strokeRect(280,230,20,30);
        side3.strokeStyle = "#658421";
        side3.fillStyle = "#0ff";
        side3.fillRect(280,230,20,30);


        //右耳朵
        side4.beginPath();
        side4.strokeRect(500,230,20,30);
        side4.strokeStyle = "#122354";
        side4.fillStyle = "#658542";
        side4.fillRect(500,230,20,30);

        //头部
        side5.beginPath();
        side5.strokeRect(300,200,200,100);
        side5.strokeStyle = "#784521";
        side5.fillStyle = "#421587";
        side5.fillRect(300,200,200,100);

        //左眼
        side6.beginPath();
        side6.arc(360,245,10,0,2*Math.PI,true);
        side6.fillStyle = "rgba(255,255,0,1)";
        side6.fill();
        side6.strokeStyle = "#699878";
        side6.stroke();

        //右眼
        side7.beginPath();
        side7.arc(440,245,10,0,2*Math.PI,true);
        side7.fillStyle = "rgba(188,123,61,1)";
        side7.fill();
        side7.strokeStyle = "#984522";
        side7.stroke();

        //嘴巴
        side8.beginPath();
        side8.strokeStyle = "#ff0";
        side8.strokeRect(375,260,50,20);
        side8.fillStyle = "#f00";
        side8.fillRect(375,260,50,20);

        //左手
        side9.beginPath();
        side9.strokeRect(130,390,200,20);
        side9.fillStyle = "#523424";
        side9.fillRect(130,390,200,20);

        //右手
        side10.beginPath();
        side10.strokeRect(470,390,200,20);
        side10.fillStyle = "#754632";
        side10.fillRect(470,390,200,20);

        //身体
        side11.beginPath();
        side11.strokeRect(330,300,140,200);
        side11.fillStyle = "#994354";
        side11.fillRect(330,300,140,200);

        //左腿
        side12.beginPath();
        side12.strokeRect(340,500,20,200);
        side12.fillStyle = "#134587";
        side12.fillRect(340,500,20,200);

        //右腿
        side13.beginPath();
        side13.strokeRect(440,500,20,200);
        side13.fillStyle = "#675552";
        side13.fillRect(440,500,20,200);

    </script>
</body>

</html>

写回答

1回答