Блог

Я хочу либо удалить, либо изменить цвет, либо изменить положение второй строки.

Кроме того, есть ли способ изменить цвет уже созданной линии?

 var cvs = document.querySelector('#canvas')
        var ctx = cvs.getContext('2d')
        cvs.height = window.innerHeight - 40
        cvs.width = window.innerWidth - 40
        window.addEventListener('resize', () => {
            cvs.height = window.innerHeight - 40;
            cvs.width = window.innerWidth - 40;

        })
        ctx.beginPath();
        ctx.strokeStyle = 'red'
        ctx.lineWidth = '5'
        ctx.lineCap = 'round'
        ctx.moveTo(200, 600)
        ctx.lineto(100,100)
        ctx.closePath();
         //Second path which is what i want to remove only
               ctx.beginPath();
                ctx.strokeStyle = 'blue'
            ctx.lineWidth = '37px'
            ctx.moveTo(100,100)
            ctx.lineTo(300, 500)
            ctx.stroke()
            ctx.closePath()
 

Объекты, нарисованные на canvas, не могут быть изменены, но их можно закрасить. В отличие от HTML или SVG, холст не имеет собственного DOM, поэтому нет возможности получить доступ к объектам, которые уже были нарисованы на холсте.

Подход 1:

Наиболее распространенным подходом является очистка canvas, настройка любых атрибутов (положение, цвет и т. Д.) И перерисовка объектов на canvas.

 ctx.clearRect(0, 0, cvs.width, cvs.height) //removes everything from the canvas
ctx.beginPath();
ctx.strokeStyle = 'red'
ctx.lineWidth = '5'
ctx.lineCap = 'round'
ctx.moveTo(200, 600)
ctx.lineTo(100,100)
ctx.stroke();
ctx.closePath(); //repaints the first object, the second path is gone.
 

Плюсы:

• более надежный: будет работать во всех ситуациях (даже когда объекты перекрываются)
• Хорошо масштабируется: лучше, когда нарисовано много объектов

Минусы:

• каждый объект должен быть перерисован на canvas. (удаляет все)

Подход 2:

Самый близкий подход к удалению отдельного объекта — он закрашивает существующий объект и перерисовывает его в другом месте.

 ctx.beginPath();
ctx.strokeStyle = 'white' //background color
ctx.lineWidth = '37px'
ctx.moveTo(100,100);
ctx.lineTo(300, 500);
ctx.stroke();
ctx.closePath(); // covers up the second path

ctx.beginPath();
ctx.strokeStyle = 'blue'
ctx.lineWidth = '37px'
ctx.moveTo(100,100)
ctx.lineTo(600, 500) //repaint this object somewhere else
ctx.stroke()
ctx.closePath()
 

Плюсы:

• Удаляет только второй путь, оставляя все остальное
• проще, когда на холсте меньше объектов

Минусы:

• Не будет работать, когда объекты перекрываются.
• Плохо масштабируется: это решение будет усложняться при изменении большего количества объектов.

Больше ресурсов:

• https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial