老师,我的问题是本节的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回答
同学你好, 整体效果实现的不错。
不过练习要求, 山峰也需要设置阴影哦, 同学可以给山峰也添加上阴影,让效果实现的更美观哦
如果帮助到了你, 欢迎采纳!
祝学习愉快~~~
相似问题
回答 3
回答 1
回答 1
回答 1
回答 1