老师，这样可以吗？

来源：7-7 编程练习

慕盖茨1437616

2018-10-17 10:51:41

<!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 context=canvas.getContext("2d");
        context.save();
        // 月亮
        context.shadowOffsetX=15;
        context.shadowOffsetY=20;
        context.shadowColor="rgba(255,255,255,0.3)";
        context.shadowBlur=20;
        context.arc(200,180,80,0,2*Math.PI,true);
        context.stroke();
        context.fillStyle="#EBEB59";
        context.fill();
        // 文字
        context.restore();
        context.shadowOffsetX=10;
        context.shadowOffsetY=20;
        context.shadowColor="rgba(255,255,255,0.6)";
        context.shadowBlur=10;
        var str="山高月小";
        context.font="80px 华文行楷";
        context.fillStyle="#fff";
        context.fillText(str,700,300);
        // 山峰
        context.restore();
        context.shadowOffsetX=0;
        context.shadowOffsetY=0;
        context.shadowColor="#4D5DB2";
        context.shadowBlur=20;
        // 山峰一
        context.beginPath();
        context.lineWidth=20;
        context.strokeStyle="#4D5DB2";
        context.moveTo(0,1000);
        context.quadraticCurveTo(100,200,200,1000);
        context.stroke();
        // 山峰二
        context.beginPath();
        context.lineWidth=20;
        context.strokeStyle="#4D5DB2";
        context.moveTo(170,1000);
        context.bezierCurveTo(150,600,300,600,400,1000);
        context.stroke();
        // 山峰三
        context.beginPath();
        context.lineWidth=20;
        context.strokeStyle="#4D5DB2";
        context.moveTo(400,1000);
        context.bezierCurveTo(400,300,600,300,700,1000);
        context.stroke();
        // 山峰四
        context.beginPath();
        context.lineWidth=20;
        context.strokeStyle="#4D5DB2";
        context.moveTo(600,1000);
        context.bezierCurveTo(750,400,1100,400,1200,1000);
        context.stroke();
    </script>
</body>
</html>

写回答

1回答