Рисовалка JavaScript

@wweelltt · Регистрация: 21.04.2022

Author24 — интернет-сервис помощи студентам

Помогите пожалуйста, как преобразовать картинку в канвас, чтобы на ней можно было рисовать как на канвасе?

HTML5    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>www</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="jsCanvas" class="canvas"></canvas>
    <div class="controls">
      <div class="controls__range">
        <input type="range" id="jsRange" min="0.1" max="5.0" value="2.5" step="0.1">
      </div>
      <div class="controls__btns">
        <button id="jsMode">Очистить</button>
        <button id="jsSave">Сохранить</button>
      </div>
        <div class="controls__colors" id="jsColors">
            <div class="controls__color" style="background-color:#0c0c0c"></div>
            <div class="controls__color" style="background-color:rgb(87, 87, 87)"></div>
            <div class="controls__color" style="background-color:white"></div>
            <div class="controls__color" style="background-color:red"></div>
            <div class="controls__color" style="background-color:orangered"></div>
            <div class="controls__color" style="background-color:yellow"></div>
            <div class="controls__color" style="background-color:green"></div>
            <div class="controls__color" style="background-color:rgb(0, 162, 232)"></div>
            <div class="controls__color" style="background-color:blue"></div>
            <div class="controls__color" style="background-color:purple"></div>
            <div class="controls__color" style="background-color:rgb(0, 255, 0)"></div>
        </div>
    </div>
  <script src="app.js"></script>
</body>
</html>

JavaScript    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
const canvas = document.getElementById('jsCanvas');
const ctx = canvas.getContext('2d');
 
canvas.height = 700;
canvas.width = 700;
 
ctx.lineWidth = 2.5;
ctx.strokeStyle = '#0c0c0c';
 
let painting = false;
 
document.getElementById('jsMode').addEventListener('click', onClear);
 
function onClear() {
  const canvas = document.getElementById('jsCanvas');
  const context = canvas.getContext('2d');
  context.clearRect(0, 0, canvas.width, canvas.height);
}
 
function stopPainting(){
    painting = false;
}
 
function startPainting(){
    painting = true;
}
 
function clearCanvas() {
    context.clearRect(0, 0, canvas.width, canvas.height);
}
 
function onMouseMove(event){
    x = event.offsetX;
    y = event.offsetY;
    if (!painting) {
        ctx.beginPath();
        ctx.moveTo(x, y);
    } else {
        ctx.lineTo(x, y);
        ctx.stroke();
    }
}
 
function onMouseDown(event){
    painting = true;
}
 
if (canvas) {
    canvas.addEventListener('mousemove', onMouseMove);
    canvas.addEventListener('mousedown', onMouseDown);
    canvas.addEventListener('mouseup', stopPainting);
    canvas.addEventListener('mouseleave', stopPainting);
}

CSS    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
body {
    background-color: bisque;
    font-family: -apple-system, BlinkMacSystemFont, Verdana, Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
}
 
.canvas {
    width: 700px;
    height: 700px;
    background-color: white;
}
 
.controls{
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
 
.controls .controls__btns {
    margin-bottom: 30px;
}
 
.controls__btns button {
    cursor: pointer;
    background-color: white;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
}
 
.controls .controls__colors {
    display: flex;
}
 
.controls__colors .controls__color {
    width: 50px;
    height: 50px;
    cursor: pointer;
}
 
.controls .controls__range {
    margin-bottom: 30px;
}

Новые блоги и статьи Все статьи Все блоги /
Анализ и линтинг кода JavaScript: ESLint, Prettier и JSHint run.dev 26.04.2025 JavaScript прошёл долгий путь от простого языка для анимации веб-страниц до основы современной веб-разработки. С ростом сложности приложений, увеличением кодовых баз и масштабированием команд. . .	Паттерны в Python: Singleton, Factory и Observer py-thonny 26.04.2025 Паттерны проектирования — это проверенные временем решения типовых проблем разработки программного обеспечения. Их история берёт начало с книги "Приёмы объектно-ориентированного проектирования. . . .	Исключения в C#: Stack Overflow, Access Violation и Out of memory stackOverflow 26.04.2025 Исключения в C# — это не только механизм оповещения о проблемах, а целое искусство управления потоком выполнения программы в экстремальных ситуациях. Обычное исключение, например,. . .	Логирование в C# ASP.NET Core с помощью Serilog, ElasticSearch, Kibana stackOverflow 25.04.2025 Помните те времена, когда для анализа проблемы приходилось подключаться к серверу, искать нужный лог-файл среди десятков других и вручную фильтровать тысячи строк в поисках ошибки? К счастью, эти дни. . .	Структура "железный OnKeyUp" вместо антидребезга. Полностью асинхронный счётчик. Hrethgir 25.04.2025 Программа для симуляции схемы - Logisim Evolution В общем какое-то время отвлёкся, так было надо, теперь когда запилю это на verilog и FPGA , досоставлю заявку в ФИПС на полезную модель - не готов. . .
Автоматизация Amazon Web Services (AWS) с Boto3 в Python py-thonny 25.04.2025 Облачные вычисления стали неотъемлемой частью современной ИТ-инфраструктуры, а Amazon Web Services (AWS) занимает лидирующие позиции среди провайдеров облачных услуг. Управление многочисленными. . .	Apache Kafka vs RabbitMQ в микросервисной архитектуре ArchitectMsa 25.04.2025 Современная разработка ПО всё чаще склоняется к микросервисной архитектуре — подходу, при котором приложение разбивается на множество небольших, автономных сервисов. В этой распределённой среде. . .	Параллельное программирование с OpenMP в C++ NullReferenced 24.04.2025 Параллельное программирование — подход к созданию программ, когда одна задача разбивается на несколько подзадач, которые могут выполняться одновременно. Оно стало необходимым навыком для. . .	Цепочки методов в C# с Fluent API UnmanagedCoder 24.04.2025 Современное программирование — это не только решение функциональных задач, но и создание кода, который удобно поддерживать, расширять и читать. Цепочки методов и Fluent-синтаксис в C# стали мощным. . .	Мульти-тенантные БД с PostgreSQL Row Security Codd 23.04.2025 Современные облачные сервисы и бизнес-приложения всё чаще обслуживают множество клиентов в рамках единой программной инфраструктуры. Эта архитектурная модель, известная как мульти-тенантность, стала. . .