矩形那里把style写在rect下面，它就会是黑色的不是我设定的那个颜色
来源：3-11 编程练习
蒜泥辣椒麻油加醋酱
2019-08-15 10:14:08
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style>
canvas{background-color:lightblue;}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="800">
您的浏览器不支持canvas
</canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 天线
ctx.moveTo(200,100);
ctx.lineTo(250,200);
ctx.lineWidth = 4;
ctx.strokeStyle = "#fec124";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(400,100);
ctx.lineTo(350,200);
ctx.strokeStyle = "#fec124";
ctx.stroke();
// 脸部轮廓
ctx.fillStyle = "#ffdab9";
ctx.fillRect(200,200,200,120);
// 眼睛
ctx.beginPath();
ctx.arc(250,240,10,0,2*Math.PI,true)
ctx.fillStyle = "#000";
ctx.fill();
ctx.beginPath();
ctx.arc(350,240,10,0,2*Math.PI,true)
ctx.fillStyle = "#000";
ctx.fill();
// 嘴巴
ctx.beginPath();
ctx.closePath();
ctx.fillStyle = "#ff0000";
ctx.fillRect(260,270,80,26);
// 耳朵
ctx.fillStyle = "#ffd700";
ctx.fillRect(170,235,30,50);
ctx.fillRect(400,235,30,50);
// 身体
ctx.fillStyle = "#ffb6c1";
ctx.fillRect(230,320,140,200);
// 手臂
ctx.fillStyle = "#20b2aa";
ctx.fillRect(80,380,150,20);
ctx.fillRect(370,380,150,20);
// 腿
ctx.fillRect(250,520,20,200);
ctx.fillRect(330,520,20,200);
//在此处写出代码
</script>
</body>
</html>
1回答
-
同学你好，
代码实现效果没有问题，很棒哦！
同学说的是第一个矩形吗？
因为前面没有设置过填充颜色，而fillRect绘制的时候有填充的效果，默认颜色是黑色的，所以会显示出来黑色。
如果之前设置过了填充颜色，就会使用之前设置的颜色，例如：
脸部下面左侧眼睛填充颜色换位置：
左侧眼睛颜色就是之前设置的脸部颜色。
自己可以测试理解下，祝学习愉快！
0
相似问题