<!doctype html>
<html>
<head>
<title>canvasExample</title>
<meta charset='utf-8' />
</head>
<body>
<input type="button" onclick="myfunc()" value="Нарисовать домик">
<br>
<br>
<canvas height='700' width='700' id='example'></canvas>
<script>
function myfunc(){
const canvas = document.querySelector('#example');
const ctx = canvas.getContext('2d');
let colors = [];
colors.push('#' + Math.floor(Math.random()*16777215).toString(16));
colors.push('#' + Math.floor(Math.random()*16777215).toString(16));
colors.push('#' + Math.floor(Math.random()*16777215).toString(16));
colors.push('#' + Math.floor(Math.random()*16777215).toString(16))
ctx.beginPath();
ctx.fillStyle = colors[0];
ctx.moveTo(0,250);
ctx.lineTo(250,0);
ctx.lineTo(500,250);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = colors[1];
ctx.fillRect(50,250,400,400);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = colors[2];
ctx.fillRect(170,350,150,180);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = colors[3];
ctx.fillRect(240,350,5,180);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = colors[3];
ctx.fillRect(170,450,150,5);
ctx.fill();
}
</script>
</body>
</html>
| 