add: labels
This commit is contained in:
parent
ad4682fada
commit
e0469d7a54
@ -11,7 +11,7 @@
|
||||
|
||||
<body>
|
||||
<div id="menu">
|
||||
<select id="color">
|
||||
<select id="colorSelect">
|
||||
<option value="green">Zielony</option>
|
||||
<option value="red">Czerwony</option>
|
||||
<option value="yellow">Żółty</option>
|
||||
@ -20,8 +20,10 @@
|
||||
<option value="black">Czarny</option>
|
||||
<option value="lime">Limonkowy</option>
|
||||
</select>
|
||||
<input type="range" min="5" max="40" value="5" id="weight"/>
|
||||
<button id="clear">Wyczyść rysunek!</button>
|
||||
<label for="colorSelect">Wybierz kolor: </label>
|
||||
<input type="range" min="5" max="40" value="5" id="weightSlider"/>
|
||||
<label for="weightSlider">Wybierz grubość linii: </label>
|
||||
<button id="clearButton">Wyczyść rysunek!</button>
|
||||
</div>
|
||||
<canvas id="canvas"></canvas>
|
||||
</body>
|
||||
|
@ -4,12 +4,7 @@ document.addEventListener('mouseup', stopPainting);
|
||||
document.addEventListener('mousemove', draw);
|
||||
window.addEventListener('resize', resize);
|
||||
|
||||
const colorSelector = document.getElementById('color');
|
||||
const weightSlider = document.getElementById('weight');
|
||||
const clearButton = document.getElementById('clear');
|
||||
const canvas = document.getElementById('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
let color = 'green';
|
||||
let weight = 5;
|
||||
|
||||
@ -28,6 +23,7 @@ document.addEventListener('wheel', e => {
|
||||
clearButton.addEventListener('click', () => ctx.clearRect(0, 0, canvas.width, canvas.height))
|
||||
weightSlider.addEventListener('change', e => weight = e.target.value)
|
||||
colorSelector.addEventListener('change', e => color = e.target.value)
|
||||
|
||||
resize();
|
||||
|
||||
function resize() {
|
||||
|
Loading…
Reference in New Issue
Block a user