老师，有什么可以改进的

来源：7-7 编程练习

光aaaaand影

2019-08-18 11:01:58

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        canvas{background-color:rgb(77,77,77);}
    </style>
</head>
<body>
    <canvas id="canvas" width="1200px" height="1000px">
        您的浏览器不支持canvas
    </canvas>
    <script>
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        // 在此处补充代码
        ctx.save();//保存环境
        
        // 绘制月亮
        ctx.shadowOffsetX=10;
        ctx.shadowOffsetY=10;
        ctx.shadowBlur=20;
        ctx.shadowColor="rgba(200,200,200,0.7)";
        
        ctx.beginPath();
        ctx.fillStyle="yellow"
        ctx.arc(100,100,60,0,2*Math.PI);
        ctx.fill();
        
        //绘制山峰
        ctx.restore();//恢复环境
        ctx.save()//保存环境
        ctx.shadowOffsetX=5;
        ctx.shadowOffsetY=5;
        ctx.shadowBlur=15;
        ctx.shadowColor="rgba(180,180,180,0.4)";
        
        ctx.lineWidth = 10;
        ctx.strokeStyle = "rgb(88,95,150)";
        // 第一座山
        ctx.beginPath();
        ctx.moveTo(0, 1000);
        ctx.quadraticCurveTo(120, 180, 250, 1000);
        ctx.stroke();
        // 第二座山
        ctx.beginPath();
        ctx.moveTo(200, 1000);
        ctx.quadraticCurveTo(280, 300, 450, 1000);
        ctx.stroke();
        // 第三座山
        ctx.beginPath();
        ctx.moveTo(450, 1000);
        ctx.quadraticCurveTo(500, -100, 750, 1000);
        ctx.stroke();
        // 第四座山
        ctx.beginPath();
        ctx.moveTo(680, 1000);
        ctx.quadraticCurveTo(900, 140, 1200, 1000);
        ctx.stroke();
        
        // 绘制文字
        ctx.restore();//恢复环境
        ctx.shadowOffsetX=10;
        ctx.shadowOffsetY=20;
        ctx.shadowBlur=8;
        ctx.shadowColor="rgba(255,255,255,0.4)";
        
        ctx.fillStyle="#fff";
        ctx.font="bold 80px 华文行楷"
        ctx.fillText("山高月小",700,250);
    </script>
</body>
</html>

感觉代码重复了好多，但是每一个元素的阴影效果又不能一概而论，请问老师，如何优化啊

写回答

1回答