老师,我的问题是本节的7-7编程练习。

来源:7-7 编程练习

慕斯0469344

2019-09-09 15:24:59

<!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 = 10;
        context.shadowOffsetY = 10;
       context.shadowColor = 'rgba(255,255,255,.5)';
       context.fillStyle = 'rgba(255,215,0,.9)';
        context.arc(200,200,100,0,Math.PI*2,true);
        context.fill();

        context.beginPath();
        context.font = '50px 微软雅黑';
        context.shadowOffsetX = 10;
        context.shadowOffsetY = 10;
       context.shadowColor = 'rgba(255,255,255,.3)';
       context.fillStyle = '#fff';
        context.fillText('山高月小',600,400);
        context.restore();
        context.beginPath();
        context.lineWidth = 8;
        context.moveTo(0,1000);
        context.quadraticCurveTo(200,400,300,1000);
        context.strokeStyle = '#0066ff';
        context.stroke();

        context.beginPath();
        context.lineWidth = 8;
        context.moveTo(230,1000);
        context.quadraticCurveTo(280,500,500,1000);
        context.strokeStyle = '#0066ff';
         context.stroke();

        context.beginPath();
        context.lineWidth = 8;
        context.moveTo(500,1000);
        context.quadraticCurveTo(580,300,800,1000);
        context.strokeStyle = '#0066ff';
        context.stroke();

        context.beginPath();
        context.lineWidth = 8;
        context.moveTo(750,1000);
        context.quadraticCurveTo(1000,400,1200,1000);
        context.strokeStyle = '#0066ff';
         context.stroke();
    </script>
</body>
</html>

老师,您看我算完全实现了吗?

写回答

1回答

好帮手慕慕子

2019-09-09

同学你好, 整体效果实现的不错。

不过练习要求, 山峰也需要设置阴影哦, 同学可以给山峰也添加上阴影,让效果实现的更美观哦

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

0

0 学习 · 6815 问题

查看课程