<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;">
</canvas>
<br>
<select id="myselect">
<option value="value1">красный</option>
<option value="value2">зеленый</option>
<option value="value3">синий</option>
<option value="value3">желтый</option>
</select>
<br>
<input type="button" value="проверить цвет" onclick="check()">
<script>
let mcolor = 0;
let col = 0;
create_color();
function create_color(){
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
mcolor = col;
col = Math.floor(Math.random() * 4);
if (col == 0){
ctx.fillStyle = "red";
ctx.fillRect(0,0, 500, 100);
}
if (col == 1){
ctx.fillStyle = "green";
ctx.fillRect(0,0, 500, 100);
}
if (col == 2){
ctx.fillStyle = "blue";
ctx.fillRect(0,0, 500, 100);
}
if (col == 3){
ctx.fillStyle = "yellow";
ctx.fillRect(0,0, 500, 100);
}
}
function check(){
create_color();
let select = document.getElementById("myselect").selectedIndex;
if (select == mcolor) alert("Вы правильно определили цвет");
}
</script>
</body>
</html>
| 