老师检查一下效果
来源：7-7 编程练习
Raymond0913
2020-09-11 00:31:54
<!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.shadowOffsetX = "10";
ctx.shadowOffsetY = "10";
ctx.shadowColor = "rgba(237,237,91,0.5)";
ctx.shadowBlur = "20";
ctx.fillStyle = "#eded5b";
ctx.arc(150, 100, 50, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
var str = "山高月小"
ctx.fillStyle = "#FFF"
ctx.font = "80px '华文行楷'";
ctx.shadowOffsetX = "10";
ctx.shadowOffsetY = "20";
ctx.shadowColor = "rgba(255,255,255,0.5)";
ctx.shadowBlur = "10";
ctx.fillText(str, 600, 200);
ctx.beginPath();
ctx.lineWidth = 10;
ctx.strokeStyle = "#596397";
ctx.shadowOffsetX = "5";
ctx.shadowOffsetY = "5";
ctx.shadowColor = "rgba(89,99,151,0.5)";
ctx.shadowBlur = "10";
ctx.moveTo(0, 1000);
ctx.quadraticCurveTo(100, 100, 200, 1000);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(150, 1450);
ctx.quadraticCurveTo(100, 100, 500, 1000);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(500, 1000);
ctx.quadraticCurveTo(500, 10, 800, 1000);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(700, 1000);
ctx.quadraticCurveTo(1000, 15, 1330, 1500);
ctx.stroke();
ctx.beginPath();
</script>
</body>
</html>
1回答
-
好帮手慕夭夭
2020-09-11
同学你好，做的很棒! 继续加油，祝学习愉快~
0
