canvas画小房子（补充:简陋的小房子）_H5之家 - 中国HTML5教程资源分享第一站

<!doctype html>
<html>
<head>
<title>小房子</title>
<meta charset="utf-8">
<style type="text/css">
#cvs{
background:pink;
}
</style>
</head>
<body>
<canvas id="cvs" width="300px" height="300px">
您的浏览器不支持canvas标签！
</canvas>
<script>
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();
</script>
</body>
</html>