Как задать фон для объекта на холсте?

Я сделал небольшой холст и создал квадрат с рисунком пути moveto() и lineto().Как задать фон для объекта на холсте?

Так что у меня есть квадрат с красными границами, и я могу дать цвет фона с fillStyle, и он получает цвет с fill().

Он выполняется щелчком.

var c = document.createElement('canvas'); 
c.id = 'myCanvas'; 
c.style.background = "#ffffff"; 
c.width = "100"; 
c.height = "50"; 
document.getElementById('container').appendChild(c); 

var ctx = c.getContext("2d"); 
ctx.beginPath(); 
ctx.moveTo(0, 0); 
ctx.lineTo(0, 80); 
ctx.lineTo(50, 80); 
ctx.lineTo(50, 0); 
ctx.lineTo(0, 0); 
ctx.strokeStyle = "red"; 
ctx.stroke(); 

var getColor2 = 0; 
var getColor = 0; 

c.addEventListener("click", function(){ 
     if(getColor2 == 0){ 
      ctx.fillStyle = "#ffffff"; 
     } 
     if(getColor2 == 1){ 
      ctx.fillStyle = "#ff33df"; 
     } 
     if(getColor2 == 2){ 
      ctx.fillStyle = "#bbbbbb"; 
     } 
     if(getColor2 == 3){ 
      ctx.fillStyle = "#bb4563"; 
     } 
     if(getColor2 == 4){ 
      ctx.fillStyle = "#234556"; 
      getColor2 = -1; 
     } 

     getColor2++; 
     ctx.fill(); 

});

https://jsfiddle.net/mafb7qhh/2/

Моей проблема: она выполняется, когда я нажимаю на холсте, а также. Я хотел бы выполнить, нажав только на квадрат.

источник

2016-01-28 Dave_c

Вы должны сделать расчет самостоятельно, если вы нажали на квадрат, используя его расположение/размер и положение курсора, потому что квадрат не существует – Saba

О, я вижу. Это не объект, а только округленная область. Что происходит, если у меня больше квадратов? –

все, что вы рисуете внутри холста, не может быть «выбрано», если вам нужны какие-то области с кликами, возможно, SVG может пригодиться, а не холст, или использовать невидимый элемент dom над холстом с одинаковым положением/размером элемент, который вы нарисовали – Saba

Все, что вы рисуете внутри холста, не может быть выбрано, потому что оно не существует, как элемент DOM. Если вам нужна некоторая интерактивная область возможно SVG может пригодиться вместо холста, или же с помощью невидимого элемента DOM над холстом с тем же позицией/размером элемента вы нарисовали

Во всяком случае, я сделал этот маленький jsfiddle , проверяя из списка прямоугольников, если мышь закончилась или нет, например, если вы хотите обрабатывать события мыши с использованием холста (только для прямоугольников).

Для более сложных полигонов вам необходимо использовать (например) ray casting algorithm. https://en.wikipedia.org/wiki/Point_in_polygon

источник

2016-01-29 07:17:16 Saba

Спасибо Sabba. Я многому научился. –

Как задать фон для объекта на холсте?

ответ

Смежные вопросы