<!DOCTYPE html>
<html>
<body >
<br>
Координата X <input type="text" id="valueX" value="0">
<br>
Координата Y <input type="text" id="valueY" value="100">
<br>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
</canvas>
<br>
<input type="text" id="value1" value="100">
<br>
<input type="button" onclick ="myclick1()" value="горизонтальная линия">
<br>
<input type="text" id="value2" value="100">
<br>
<input type="button" onclick ="myclick2()" value="вертикальная линия">
<script>
let x = 0;
let y = 0;
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
function myclick1(){
ctx.fillStyle = '#' + Math.floor(Math.random()*16777215).toString(16);
let value1 = document.getElementById("value1");
sizeline = Number(value1.value);
x = Number(document.getElementById("valueX").value);
y = Number(document.getElementById("valueY").value);
ctx.fillRect(Number(x),Number(y),sizeline,10);
}
function myclick2(){
ctx.fillStyle = '#' + Math.floor(Math.random()*16777215).toString(16);
let value1 = document.getElementById("value1");
sizeline = Number(value2.value);
x = Number(document.getElementById("valueX").value);
y = Number(document.getElementById("valueY").value);
ctx.fillRect(Number(x),Number(y),10,sizeline);
}
</script>
</body>
</html>
| 