<!doctype html>
<html>
<head>
<title>canvasExample</title>
<meta charset='utf-8' />
</head>
<body>
<input type="button" onclick="myfunc()" value="создать рисунок">
<br>
<br>
<canvas height='500' width='500' 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.arc(250,250,250,0,90 * Math.PI / 180);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = colors[1];
ctx.arc(250,250,250,90 * Math.PI / 180,180 * Math.PI / 180);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = colors[2];
ctx.arc(250,250,250,180 * Math.PI / 180,270 * Math.PI / 180);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = colors[3];
ctx.arc(250,250,250,270 * Math.PI / 180,360 * Math.PI / 180);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = colors[0];
ctx.moveTo(250,250);
ctx.lineTo(250,500);
ctx.lineTo(500,250);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = colors[1];
ctx.moveTo(0,250);
ctx.lineTo(250,500);
ctx.lineTo(250,250);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = colors[2];
ctx.moveTo(0,250);
ctx.lineTo(250,0);
ctx.lineTo(250,250);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = colors[3];
ctx.moveTo(250,0);
ctx.lineTo(500,250);
ctx.lineTo(250,250);
ctx.fill();
}
</script>
</body>
</html>
| 