canvas 简绘大房子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

</head>
<body>
<canvas id="canv" width='500px' height='300px'>
shengjin
</canvas>
<script>
var canvas = document.getElementById('canv');
canvas.style.border="1px solid red";
var ctx= canvas.getContext('2d');
ctx.strokeRect(100,100,300,200);
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(150,50);
// ctx.lineTo(200,100);
// ctx.lineTo(250,50);
// ctx.lineTo(300,100);
ctx.lineTo(350,50);
ctx.lineTo(400,100);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.moveTo(200,300);
ctx.lineTo(200,100);
ctx.lineTo(300,100);
ctx.lineTo(300,300);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.lineWidth=15;
ctx.moveTo(220,300);
ctx.lineTo(220,120);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.lineWidth=15;
ctx.moveTo(280,300);
ctx.lineTo(280,120);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.lineWidth=7;
ctx.moveTo(205,250);
ctx.lineTo(295,250);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.lineWidth=7;
ctx.moveTo(200,245);
ctx.lineTo(300,245);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.lineWidth=7;
ctx.moveTo(205,185);
ctx.lineTo(295,185);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.lineWidth=7;
ctx.moveTo(200,180);
ctx.lineTo(300,180);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.moveTo(205,120);
ctx.lineTo(250,80);
ctx.lineTo(295,120);
ctx.closePath();
ctx.fillstyle="#000";
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.strokeRect(120,260,60,30);
ctx.strokeRect(120,200,60,30);
ctx.strokeRect(120,137,60,30);

ctx.strokeRect(320,260,60,30);
ctx.strokeRect(320,200,60,30);
ctx.strokeRect(320,137,60,30);
ctx.closePath();

//树
ctx.beginPath();
ctx.lineWidth=15;
ctx.moveTo(50,300);
ctx.lineTo(50,230);
ctx.closePath();
ctx.strokeStyle="#642100";
ctx.stroke();

ctx.beginPath();
ctx.arc(50,240,16,0,Math.PI*2,true);
ctx.strokeStyle="#007500"
ctx.fillStyle="#007500"
ctx.fill()
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.arc(35,255,16,0,Math.PI*2,true);
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.arc(65,260,16,0,Math.PI*2,true);
ctx.fill();
ctx.stroke();

</script>
</body>
</html>

posted on 2019-03-15 10:45 I-MEDITATE 阅读(301) 评论(0) 收藏举报

刷新页面返回顶部