请问有需要优化的地方吗，谢谢,

来源：7-7 编程练习

qq_慕移动3101913

2020-03-02 21:41:14

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        canvas{background-color:#000;opacity:0.7}
    </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();

        //阴影的X偏移
        ctx.shadowOffsetX = 6;
        //阴影的Y偏移
        ctx.shadowOffsetY = 6;
        //阴影的颜色
        ctx.shadowColor = 'rgba(255, 255, 255, 0.5)';
        //阴影的模糊度
        ctx.shadowBlur = 10;
        ctx.fillStyle = 'yellow';
        ctx.arc(200,200,50,0,Math.PI * 2, true);
        ctx.fill();


        ctx.beginPath();
        //阴影的X偏移
        ctx.shadowOffsetX = 9;
        //阴影的Y偏移
        ctx.shadowOffsetY = 20;
        //阴影的颜色
        ctx.shadowColor = 'rgba(255, 255, 255 0.5)';
        //阴影的模糊度
        ctx.shadowBlur = 10;
        ctx.font = "bold 80px 仿宋";
        ctx.fillStyle = '#fff';
        ctx.fillText("山高月小",700,300);

        //恢复环境，释放了剪辑区域的作用
        ctx.restore();

         
        ctx.lineWidth = 10; //粗体
        ctx.strokeStyle = "#596397";  //颜色

        //绘制二次样条曲线 
        ctx.beginPath();
        ctx.moveTo(0, 1000);
        ctx.quadraticCurveTo(122, 219, 255, 1000);
        ctx.stroke();

        // //绘制二次样条曲线
        ctx.beginPath();
        ctx.moveTo(520, 1000);
        ctx.quadraticCurveTo(180, 413, 209, 1000);
        ctx.stroke();

        //绘制二次样条曲线
        ctx.beginPath();
        ctx.moveTo(520, 1000);
        ctx.quadraticCurveTo(472, 65, 804, 1000);
        ctx.stroke();

        //绘制贝塞尔曲线
        ctx.beginPath();
        ctx.moveTo(678, 1000);
        ctx.bezierCurveTo(874, 506, 1036, 428, 1200, 1000);
        ctx.stroke();
    </script>
</body>
</html>

写回答

1回答