Установка fillStyle для элемента списка не работает?

#javascript #html #canvas

#javascript #HTML #холст

Вопрос:

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

элемент, который отображает, какой цвет выбран, затем я использую функцию, которая увеличивает значение переменной с именем selector, и все это работает в основном хорошо. Текст меняется, но цвет рисунка не меняется. Я попытался использовать массив, который я помещаю в элемент fillStyle во внутреннем тексте, чтобы увидеть, действительно ли этот массив меняется, и это так, fillStyle просто не меняется. Есть идеи, что не так? Это мой код.

 <canvas id='dr' width = '640' height = '480' style = 'display: block;' ></canvas>
<p id = 'color'></p>
<script>
var canvas = document.getElementById('dr');   
var ctx = canvas.getContext('2d');
var line = false

function drawType(){
if (line === true){
line = false;}
else{line = true;}
}

 var drawing = false;

function Type(){}
//start the drawing if the mouse is down
    canvas.addEventListener('mousedown', () => {
      drawing = true;
    })
    //stop the drawing if the mouse is up
    canvas.addEventListener('mouseup', () => {
      drawing = false;
    });
    //add an event listener to the canvas for when the user moves the mouse over it and the mouse is down
   var colors = ['DarkRed', 'DarkOrange', 'Gold', 'Green', 'MediumBlue', 'Indigo', 'Violet', 'Black']
var displayColors = ['r', 'Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Indigo', 'Violet', 'Black']
var selector = 0
var color = document.getElementById('color')
var selectedColor = colors[selector]
var selectedColor = colors[selector]
function switchColor(){
if (selector < 8)
{selector = selector   1; }
else{selector = 1;}
color.innerText = displayColors[selector]
selectedColor = colors[selector]
 ctx.fillstyle = selectedColor;
}
   canvas.addEventListener('mousemove', (event) => {
     
      //if the drawing mode is true (if the mouse button is down)
      if (drawing == true) {
    
    
        //put the rectangle on the canvas at the coordinates of the mouse
        ctx.fillRect(event.pageX, event.pageY, 4, 4)
    }
    }
    );
function clean(){
var canvas = document.getElementById('dr');   
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 640, 480);
}
</script>
<button onclick = 'switchColor()'> Switch drawing color</button>

Ответ №1:

 var canvas = document.getElementById('dr');
var ctx = canvas.getContext('2d');
var line = false

function drawType() {
  if (line === true) {
    line = false;
  } else {
    line = true;
  }
}

var drawing = false;

function Type() {}
//start the drawing if the mouse is down
canvas.addEventListener('mousedown', () => {
  drawing = true;
})
//stop the drawing if the mouse is up
canvas.addEventListener('mouseup', () => {
  drawing = false;
});
//add an event listener to the canvas for when the user moves the mouse over it and the mouse is down
var colors = ['DarkRed', 'DarkOrange', 'Gold', 'Green', 'MediumBlue', 'Indigo', 'Violet', 'Black']
var displayColors = ['r', 'Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Indigo', 'Violet', 'Black']
var selector = 0
var color = document.getElementById('color')
var selectedColor = colors[selector];

function switchColor() {
  if (selector < 8) {
    selector = selector   1;
  } else {
    selector = 1;
  }
  color.innerText = displayColors[selector];
  selectedColor = colors[selector];
      ctx.fillStyle = colors[selector-1];
}
canvas.addEventListener('mousemove', (event) => {

  //if the drawing mode is true (if the mouse button is down)
  if (drawing == true) {


    //put the rectangle on the canvas at the coordinates of the mouse
    ctx.fillRect(event.pageX, event.pageY, 4, 4)
  }
});

function clean() {
  var canvas = document.getElementById('dr');
  var ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, 640, 480);
}

 <canvas id='dr' width='640' height='480' style='display: block;'></canvas>
<p id='color'></p>

<button onclick='switchColor()'> Switch drawing color</button>

1. Нет, им не нужно устанавливать его в mousemove, и это даже плохо, установка fillStyle — медленная операция, ее следует выполнять только при необходимости.

2. исправлено сейчас. Я должен был проверить орфографию, прежде чем предлагать это «решение».