用HTML5图形拼成的画房子,canvas画小房子（补充:简陋的小房子）

小房子

#cvs{

background:pink;

}

您的浏览器不支持canvas标签！

var canvas=document.getElementById("cvs");

var cxt=canvas.getContext("2d");

//窗户

cxt.strokeRect(50,50,200,200);

cxt.fillStyle = "skyblue";

cxt.fillRect(80,80,50,50);

cxt.beginPath();

cxt.rect(50,50,200,200);

cxt.stroke();

cxt.closePath();

cxt.beginPath();

cxt.moveTo(50,50);

cxt.lineTo(150,10);

cxt.lineTo(250,50)

cxt.closePath();

cxt.stroke();

//窗户杠

cxt.beginPath();

cxt.moveTo(105,80);

cxt.lineTo(105,130);

cxt.closePath();

cxt.stroke();

cxt.moveTo(80,105);

cxt.lineTo(130,105);

cxt.closePath();

cxt.stroke();

//门

cxt.strokeRect(50,50,200,200);

cxt.fillStyle = "gray";

cxt.fillRect(180,150,50,100);

cxt.beginPath();

cxt.rect(50,50,200,200);

cxt.stroke();

cxt.closePath();

//门把手

cxt.beginPath();

cxt.strokeRect(215,200,5,10);

cxt.fillStyle = "black";

cxt.fillRect(215,200,5,10);

cxt.stroke();

cxt.closePath();

//烟囱

cxt.beginPath();

cxt.moveTo(175,20);

cxt.lineTo(175,10);

cxt.closePath();

cxt.stroke();

cxt.moveTo(195,30);

cxt.lineTo(195,10);

cxt.closePath();

cxt.stroke();

cxt.moveTo(175,10);

cxt.lineTo(195,10);

cxt.closePath();

cxt.stroke();