Світлофор

Створення зображень на веб-сторінці

by oleksandr_s

HTML

<center>
    <canvas id = "sheet" width = "800" height = "500" style = "background: lightblue;">
    </canvas>
</center>

JavaScript

var easel = document.getElementById('sheet');
var ctx = easel.getContext('2d');

function getRadians(degrees) {
	return (Math.PI/180)*degrees;
}

ctx.beginPath();
ctx.rect(300, 50, 200, 400);
ctx.fillStyle = "grey";
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.arc(400, 120, 50, 0, getRadians(360));
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.arc(400, 250, 50, 0, getRadians(360));
ctx.fillStyle = "yellow";
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.arc(400, 380, 50, 0, getRadians(360));
ctx.fillStyle = "green";
ctx.fill();
ctx.stroke();