山峰的坐标时抄袭的别人的，如何自己能写出来呢？靠试一试吗？有方法吗
来源：7-7 编程练习
unbreakable_全栈
2020-09-28 14:38:18
<!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 = 10
context.shadowOffsetY = 10
context.shadowColor = 'rgba(237,237,91,0.5)'
context.shadowBlur = 10
context.fillStyle = '#eded5b'
context.arc(100, 100, 30, 0, Math.PI * 2, true)
context.fill()
context.beginPath()
// 山峰
context.lineWidth = 10
context.strokeStyle = '#596397'
context.shadowOffsetX = 10
context.shadowOffsetY = 10
context.moveTo(0, 1000);
context.quadraticCurveTo(100, 100, 200, 1000);
context.stroke();
context.beginPath();
context.moveTo(150, 1450);
context.quadraticCurveTo(100, 100, 500, 1000);
context.stroke();
context.beginPath();
context.moveTo(500, 1000);
context.quadraticCurveTo(500, 10, 800, 1000);
context.stroke();
context.beginPath();
context.moveTo(700, 1000);
context.quadraticCurveTo(1000, 15, 1330, 1500);
context.stroke();
// 山高月小
context.beginPath();
var str = '山高月小'
context.font = '50px snas-serif'
context.shadowOffsetX = 10
context.shadowOffsetY = 10
context.shadowColor = "rgba(255,255,255,0.5)";
context.shadowBlur = "10";
context.fillText(str, 600, 200)
</script>
</body>
</html>
1回答
-
同学你好，代码绘制效果可以。
优化：建议将文字颜色设置为白色，和效果图一致
阴影明显一些
另外课程中提供了贝塞尔曲线的网站
左侧可以鼠标操作点的位置，右侧生成代码
粘贴代码使用，可能还需要根据绘制的canvas来调整绘制位置。
祝学习愉快！
0
相似问题