Javascript 正在尝试在画布填充（）中填充两种不同的颜色
我正在尝试使用画布和Javascript绘制一座房子。如果你看看我的drawHouse（）方法，我想把屋顶涂成红色，其他的都涂成白色。但只有白色可以填充所有的颜色Javascript 正在尝试在画布填充（）中填充两种不同的颜色,javascript,html,canvas,Javascript,Html,Canvas,我正在尝试使用画布和Javascript绘制一座房子。如果你看看我的drawHouse（）方法，我想把屋顶涂成红色，其他的都涂成白色。但只有白色可以填充所有的颜色 我的网站标题 var canvas=document.getElementById（“myDrawing”）； var ctx=canvas.getContext（“2d”）； //画房子 函数drawImage（）{ drawSky（）； 草（）； 客厅（）； } //设置画布的尺寸 var x=画布宽度/2； 变量y=400；
我的网站标题
var canvas=document.getElementById（“myDrawing”）；
var ctx=canvas.getContext（“2d”）；
//画房子
函数drawImage（）{
drawSky（）；
草（）；
客厅（）；
}
//设置画布的尺寸
var x=画布宽度/2；
变量y=400；
var半径=200；
var-startAngle=0；
var endAngle=22*Math.PI；
//画天空
函数drawSky（）{
var context=canvas.getContext（'2d'）；
context.beginPath（）；
rect（0,0300300）；
context.fillStyle='#0099FF'；
context.fill（）；
context.lineWidth=1；
context.strokeStyle='black'；
stroke（）；
}
//画绿草
函数drawGrass（）{
ctx.beginPath（）；
弧（x，y，半径，星形，端角）；
ctx.stroke（）；
ctx.fillStyle=“#009900”；
ctx.fill（）；
}
功能客厅（）{
var c=document.getElementById（'myDrawing'）；
var ctx=c.getContext（'2d'）；
ctx.beginPath（）；
ctx.moveTo（95165）；
ctx.lineTo（140215）；
ctx.lineTo（26025）；
ctx.lineTo（240165）；
ctx.lineTo（95165）；
ctx.closePath（）；
ctx.fillStyle=“#C81E1E”；
ctx.fill（）；
ctx.moveTo（139215）；
ctx.lineTo（94165）；
ctx.lineTo（45215）
ctx.closePath（）；
ctx.fillStyle=“白色”；
ctx.fill（）；
ctx.moveTo（48212）；
ctx.lineTo（48275）；
ctx.lineTo（139275）；
ctx.lineTo（139215）；
ctx.lineTo（45215）；
ctx.closePath（）；
ctx.fillStyle=“白色”；
ctx.fill（）；
ctx.stroke（）；
ctx.moveTo（139275）；
ctx.lineTo（260267）；
ctx.lineTo（26025）；
ctx.lineTo（140215）；
ctx.closePath（）；
ctx.fillStyle=“白色”；
ctx.fill（）；
ctx.stroke（）；
}
drawImage（）；
看来你自己也少了几个。不一定。因为不需要有多种颜色，所以不需要开始/关闭新路径。但是我应该对代码进行更多的清理，以删除额外的fillStyles和ClosePath。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Site's Title</title>
</head>
<body>
<canvas id="myDrawing" width="300" height="300" style="border:1px solid #EEE">
</canvas>
<script>
var canvas = document.getElementById("myDrawing");
var ctx = canvas.getContext("2d");
//draws a house
function drawImage() {
drawSky();
drawGrass();
drawHouse();
}
//sets the dimensions of the canvas
var x = canvas.width / 2;
var y = 400;
var radius = 200;
var startAngle = 0;
var endAngle = 22 * Math.PI;
//draws the sky
function drawSky() {
var context = canvas.getContext('2d');
context.beginPath();
context.rect(0, 0, 300, 300);
context.fillStyle = '#0099FF';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
}
//draws green grass
function drawGrass() {
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle);
ctx.stroke();
ctx.fillStyle = "#009900";
ctx.fill();
}
function drawHouse() {
var c = document.getElementById('myDrawing');
var ctx = c.getContext('2d');
ctx.beginPath();
ctx.moveTo(95, 165);
ctx.lineTo(140, 215);
ctx.lineTo(260, 215);
ctx.lineTo(240, 165);
ctx.lineTo(95, 165);
ctx.closePath();
ctx.fillStyle = "#C81E1E";
ctx.fill();
ctx.moveTo(139, 215);
ctx.lineTo(94, 165);
ctx.lineTo(45, 215)
ctx.closePath();
ctx.fillStyle = "white";
ctx.fill();
ctx.moveTo(48, 212);
ctx.lineTo(48, 275);
ctx.lineTo(139, 275);
ctx.lineTo(139, 215);
ctx.lineTo(45, 215);
ctx.closePath();
ctx.fillStyle = "white";
ctx.fill();
ctx.stroke();
ctx.moveTo(139, 275);
ctx.lineTo(260, 267);
ctx.lineTo(260, 215);
ctx.lineTo(140, 215);
ctx.closePath();
ctx.fillStyle = "white";
ctx.fill();
ctx.stroke();
}
drawImage();
</script>
</body>
</html>
var canvas = document.getElementById("myDrawing");
var ctx = canvas.getContext("2d");
//draws a house
function drawImage() {
drawSky();
drawGrass();
drawHouse();
}
//sets the dimensions of the canvas
var x = canvas.width / 2;
var y = 400;
var radius = 200;
var startAngle = 0;
var endAngle = 22 * Math.PI;
//draws the sky
function drawSky() {
var context = canvas.getContext('2d');
context.beginPath();
context.rect(0, 0, 300, 300);
context.fillStyle = '#0099FF';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
}
//draws green grass
function drawGrass() {
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle);
ctx.stroke();
ctx.fillStyle = "#009900";
ctx.fill();
}
function drawHouse() {
var c = document.getElementById('myDrawing');
var ctx = c.getContext('2d');
ctx.beginPath();
ctx.moveTo(95, 165);
ctx.lineTo(140, 215);
ctx.lineTo(260, 215);
ctx.lineTo(240, 165);
ctx.lineTo(95, 165);
ctx.fillStyle = "red";
ctx.closePath();
ctx.fill();
ctx.beginPath(); // THIS IS THE LINE
ctx.moveTo(139, 215);
ctx.lineTo(94, 165);
ctx.lineTo(45, 215)
ctx.closePath();
ctx.fillStyle = "white";
ctx.fill();
ctx.moveTo(48, 212);
ctx.lineTo(48, 275);
ctx.lineTo(139, 275);
ctx.lineTo(139, 215);
ctx.lineTo(45, 215);
ctx.closePath();
ctx.fillStyle = "white";
ctx.fill();
ctx.stroke();
ctx.moveTo(139, 275);
ctx.lineTo(260, 267);
ctx.lineTo(260, 215);
ctx.lineTo(140, 215);
ctx.closePath();
ctx.fillStyle = "white";
ctx.fill();
ctx.stroke();
}
drawImage();