老师有没有需要改进的地方?
来源:7-7 编程练习
浅浅199
2020-03-26 21:16:21
<!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="500px" height="500px">
您的浏览器不支持canvas
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.save();
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 10;
ctx.shadowColor = "rgba(241,233,23,.7)";
ctx.arc(60,60,25,0,Math.PI*2,true);
ctx.fillStyle = "yellow";
ctx.fill();
ctx.restore();
ctx.save();
ctx.beginPath();
ctx.moveTo(0, 500);
ctx.quadraticCurveTo(62, 135, 90, 500);
ctx.lineWidth = 6;
ctx.strokeStyle = "#9171a8";
ctx.stroke();
ctx.moveTo(74, 500);
ctx.quadraticCurveTo(81, 255, 186, 500);
ctx.stroke();
ctx.moveTo(186, 500);
ctx.quadraticCurveTo(208, 96, 313, 500);
ctx.stroke();
ctx.moveTo(247, 500);
ctx.quadraticCurveTo(426, 118, 496, 500);
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 10;
ctx.shadowColor = "rgba(145,113,168,.7)";
ctx.stroke();
ctx.restore();
ctx.beginPath();
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 10;
ctx.shadowColor = "rgba(217,215,213,.7)";
ctx.shadowBlur = 5;
ctx.font = "bold 40px 华文行楷";
ctx.fillStyle = "#c9c8c7";
ctx.fillText("山高月小",250,150);
</script>
</body>
</html>
1回答
好帮手慕星星
2020-03-27
同学你好,代码绘制效果很棒,不需要修改啦。继续加油,祝学习愉快!
相似问题