Программа - paint на html, css и js

Question

Если я что-то нарисую на canvas, потом нажму клавишу s - save и r - replay, при попытке изменить фон он не будет изменятся, но при этом переменной back_color_canv будет присваеваться цвет. Для того чтоб поменять фон canva`са надо нажать на кнопу "изменить цвет фона" и выбрать цвет кликнув на цвет левее от кнопки.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Рисовалка</title>
</head>
<body style="margin: 0;">
    <div class="menu">
        <div class="color_black" onclick="color_black()"></div>
        <div class="color_yellow" onclick="color_yellow()"></div>
        <div class="color_green" onclick="color_green()"></div>
        <div class="color_red" onclick="color_red()"></div>
        <div class="color_blue" onclick="color_blue()"></div>
        <div class="color_orange" onclick="color_orange()"></div>
        <div class="color_white" onclick="color_white()"></div>
        <div id="background_color" onclick="background_color()">Изменить цвет фона</div>
        <h3>Клавиши: <small>c - очистить, s - сохранить, r - нарисовать сохраненное</small></h3>
    </div>
<canvas id="canvas">Твой браузер не поддерживает canvas.</canvas>

CSS

        html{
            overflow: hidden;
        }
        h3{
            position: inherit;
            left: 50%;
            top: -30%;
        }
        .menu{
            position: absolute;
            background-color: gray;
            height: 40px;
            width: 100%;
        }
        .color_black{
            position: inherit;
            width: 2%;
            height: 100%;
            background-color: black;
        }
        .color_yellow{
            position: inherit;
            width: 2%;
            height: 100%;
            left:2%;
            background-color: yellow;
        }
        .color_green{
            position: inherit;
            width: 2%;
            height: 100%;
            left:4%;
            background-color: green;
        }
        .color_red{
            position: inherit;
            width: 2%;
            height: 100%;
            left:6%;
            background-color: red;
        }
        .color_blue{
            position: inherit;
            width: 2%;
            height: 100%;
            left:8%;
            background-color: blue;
        }
        .color_orange{
            position: inherit;
            width: 2%;
            height: 100%;
            left:10%;
            background-color: orange;
        }
        .color_white{
            position: inherit;
            width: 2%;
            height: 100%;
            left:12%;
            background-color: white;
        }
        #background_color{
            position: inherit;
            left:16%;
            padding-top: 0.5em;
            text-align: center;
            width:8%;
            height: 80%;
            background-color: #C0C0C0;
        }
        .background_color:hover{background-color: #545454;}

JS

        var
            color = 'black',
            canv = document.getElementById('canvas'),
            ctx = canv.getContext('2d'),
            back_color = document.getElementById('background_color'),
            back_color_canv = 'white',
            back_color_log = false,
            isMouseDown = false,
            coords = [],
            rep = false;

        function background_color(){
            if(back_color_log)
            {
                back_color_log = false;
                back_color.style.backgroundColor = '#C0C0C0';
            }
            else
            {
                back_color_log = true;
                back_color.style.backgroundColor = '#5c5a5a';
            }

        }
        function color_black(){
            if(back_color_log)
            {
                canv.style.backgroundColor = 'black';
                back_color_canv = 'black';
            }
            else{color = 'black';}
        }
        function color_yellow(){
            if(back_color_log)
            {
                canv.style.backgroundColor = 'yellow';
                back_color_canv = 'yellow';
            }
            else{color = 'yellow';}
        }
        function color_green(){
            if(back_color_log)
            {
                canv.style.backgroundColor = 'green';
                back_color_canv = 'green';
            }
            else{color = 'green';}
        }
        function color_red(){
            if(back_color_log)
            {
                canv.style.backgroundColor = 'red';
                back_color_canv = 'red';
            }
            else{color = 'red';}
        }
        function color_blue(){
            if(back_color_log)
            {
                canv.style.backgroundColor = 'blue';
                back_color_canv = 'blue';
            }
            else{color = 'blue';}
        }
        function color_orange(){
            if(back_color_log)
            {
                canv.style.backgroundColor = 'orange';
                back_color_canv = 'orange';
            }
            else{color = 'orange';}
        }
        function color_white(){
            if(back_color_log)
            {
                canv.style.backgroundColor = 'white';
                back_color_canv = 'white';
            }
            else{color = 'white';}
        }

        canv.width = window.innerWidth
        canv.height = window.innerHeight

        canv.addEventListener('mousedown', function() {
            isMouseDown = true;
        });

        canv.addEventListener('mouseup', function() {
            isMouseDown = false;
            ctx.beginPath();
            coords.push('mouseup');
        });

        ctx.lineWidth = 10;
        canv.addEventListener('mousemove', function(e) {
            canv.style.backgroundColor = back_color_canv;
            if(isMouseDown && !rep)
            {
                ctx.strokeStyle = color;
                ctx.fillStyle = color;
                coords.push([e.clientX, e.clientY, color])
                ctx.lineTo(e.clientX, e.clientY);
                ctx.stroke();

                ctx.beginPath();
                ctx.arc(e.clientX, e.clientY, 5, 0, Math.PI * 2);
                ctx.fill();

                ctx.beginPath();
                ctx.moveTo(e.clientX, e.clientY);
            }
        });
    function save()
    {
        localStorage.setItem('coords', JSON.stringify(coords));
    }

    function clear()
    {
            ctx.fillStyle = back_color_canv;
            ctx.fillRect(0, 0, canv.width, canv.height);

            ctx.beginPath();
            ctx.fillStyle = color;
    }
    ctx.lineWidth = 10;
    function replay()
    {
        var
            timer = setInterval(function() {
                if(!coords.length)
                {
                    rep = false;
                    clearInterval(timer);
                    ctx.beginPath();
                    return;
                }else{
                    rep = true;
                }

                var
                    crd = coords.shift(),
                    e = {
                        clientX: crd["0"],
                        clientY: crd["1"]
                    };
                ctx.strokeStyle = crd["2"];
                ctx.fillStyle = crd["2"];
                ctx.lineTo(e.clientX, e.clientY);
                ctx.stroke();

                ctx.beginPath();
                ctx.arc(e.clientX, e.clientY, 5, 0, Math.PI * 2);
                ctx.fill();

                ctx.beginPath();
                ctx.moveTo(e.clientX, e.clientY);

            }, 25);
    }

    document.addEventListener('keydown', function(e) {

        if(e.keyCode == 83)
        {
            save();
            console.log('saved')
        }

        if(e.keyCode == 82)
        {
            coords = JSON.parse(localStorage.getItem('coords'));

            clear();
            replay();
            console.log('replay ...')
        }

        if(e.keyCode == 67)
        {
            clear();
            console.log('cleared')
        }

    });

БЛОГ НА HUSL

Программа - paint на html, css и js

Ответы (0 шт):