老师看一下两个问题

首页课程实战体系课手记专栏慕课教程

老师看一下两个问题

来源：7-7 编程练习

qq_慕运维6460539

2020-11-05 00:49:54

# 具体遇到的问题
1.我绘制图形之后背景颜色的黑色就变了，和效果图不一致；

2.我写在“画山峰“里面的context.strokeStyle = "#00e";为什么会影响到太阳的样式？

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

<!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.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 20;
// 太阳
context.save();
context.arc(200,200,100,0,Math.PI*2,true);
context.fillStyle = 'yellow';
context.shadowColor = 'yellow';
context.fill();
context.restore();
//文字
context.save();
context.fillStyle = '#fff';
context.shadowColor = '#fff';
context.font = "bold 70px STXingkai";
context.fillText("山高月小",650,300);
context.restore();
// 山峰
context.save();
context.strokeStyle = "#00e";
context.lineWidth = 12;
context.shadowColor = '#00e';
context.moveTo(0, 1000);
context.quadraticCurveTo(150, 110, 300, 1000);
context.stroke();
context.beginPath();
context.moveTo(250, 1000);
context.quadraticCurveTo(280, 200, 550, 1000);
context.stroke();
context.beginPath();
context.moveTo(550, 1000);
context.quadraticCurveTo(650, 10, 800, 1000);
context.stroke();
context.beginPath();
context.moveTo(740, 1000);
context.quadraticCurveTo(950, 50, 1200, 1000);
context.stroke();
context.restore();

// 在此处补充代码
</script>
</body>
</html>
在这里输入代码，可通过选择【代码语言】突出显示