我复制好几人的代码，用chrome打开背景，都是黑色的， 我的也是，我用16位的给了背景颜色就不会了
来源：7-7 编程练习
光着膀子去南极
2020-10-01 00:54:15
请问老师，这变成黑色是因为代码写的有问题，还是咋的？
强迫症 黑色看着心里慌，必须改颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
/* canvas{background-color:#000;opacity:0.7} */
canvas{background-color : #4D4D4D}
</style>
</head>
<body>
<canvas id="canvas" width="1200px" height="866px">
您的浏览器不支持canvas
</canvas>
<script>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.save();
// 月亮
ctx.arc(150, 150, 60, 0, 2*Math.PI, true);
ctx.fillStyle = '#E9E958';
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowColor = '#fff';
ctx.shadowBlur = 20;
ctx.fill();
// 山高月小
var str = '山高月小';
ctx.font = '88px KaiTi ';
ctx.fillStyle = '#fff';
ctx.shadowBlur = 4;
ctx.fillText(str, 750, 200);
ctx.restore();
// 曲线1
ctx.beginPath();
ctx.moveTo(-3, 866);
ctx.quadraticCurveTo(100, 120, 290, 866);
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowColor = '#596397';
ctx.shadowBlur = 12;
ctx.strokeStyle = '#596397';
ctx.lineWidth = 18;
ctx.stroke();
// 曲线2
ctx.beginPath();
ctx.moveTo(230, 866);
ctx.quadraticCurveTo(290, 230, 530, 866);
ctx.stroke();
// 曲线3
ctx.beginPath();
ctx.moveTo(520, 866);
ctx.quadraticCurveTo(600, -100, 860, 866);
ctx.stroke();
// 曲线4
ctx.beginPath();
ctx.moveTo(760, 866);
ctx.quadraticCurveTo(1040, 50, 1200, 866);
ctx.stroke();
</script>
</body>
</html>
1回答
-
同学你好，老师测试了你的代码，如果觉得canvas{background-color:#000;opacity:0.7;} 颜色比较深不好看的话，可以使用#4D4D4D设置背景色，表示的是深灰色，如果想改成其他颜色可以查找16进制颜色值，从而获得其他颜色的进制表示法，比如改成蓝色：
祝学习愉快！
0
相似问题