Question

我需要弄清楚如何使用键来改变下一个圆圈的颜色，r代表红色，b代表蓝色等等。我有一个工作代码，允许我在卡瓦斯上绘制一定大小的圆圈。我只需要弄清楚如何实现char代码函数来改变圆圈的颜色

<!DOCTYPE html>
<html> 
<body >
<div id="images"></div>
<canvas id= "circles" width="600" height="450" style="border:1px solid #000000;" onclick="draw(event)"></canvas>
<label for="radius">Enter circle radius:</label> <input name="radius"   id="radius" required autofocus />
<button onclick="reset()">reset!</button>
<script src="lab_14MouseClick.js">
var canvas = document.getElementById("circles");
var context = canvas.getContext("2d");

function createImageOnCanvas(imageId) {
canvas.style.display = "block";
document.getElementById("images").style.overflowY = "hidden";
var img = new Image(300, 300);
img.src = document.getElementById(imageId).src;
context.drawImage(img, (0), (0)); //onload....
}

function draw(e) {
var radius=document.getElementById("radius").value;

var pos = getMousePos(canvas, e);
posx = pos.x;
posy = pos.y;
context.fillStyle = "#000000";
context.beginPath();
context.arc(posx, posy, radius, 0, 2*Math.PI);
context.fill();

}

function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
  x: evt.clientX - rect.left,
  y: evt.clientY - rect.top
};
}

window.draw = draw;
function reset() {
var canvas = document.getElementById("circles");
var context = canvas.getContext("2d");
canvas.width = canvas.width;
}
</script>

</body>
</html>

这是我想用于使圆圈改变颜色的代码，我只是不确定如何将其添加到

function blue (event) {
var x = event.charCode || event.keyCode;
if (x == 66 || x == 98) {  
//change color to blue
}
}

function red(event) {
var x = event.charCode || event.keyCode;
if (x == 82 || x == 114) {  
 //change color to red
}
}

function green (event) {
var x = event.charCode || event.keyCode;
if (x == 71 || x == 103) {  
 //change color to green
}
}

function yellow (event) {
var x = event.charCode || event.keyCode;
if (x == 89 || x == 121) {  
 //change color to yellow
}
}

function purple (event) {
var x = event.charCode || event.keyCode;
if (x == 80 || x == 112) {  
 //change color to purple
}
}

Answer 1

您可以执行类似

的操作

＆＃13;

var canvas = document.getElementById("circles");
var context = canvas.getContext("2d");
//color to be used
var color = "#000000";

//a keycode and color mapping
var colorMap = {
  96: "#000000",
  65: '#000000',
  97: 'red',
  66: 'red',
  98: 'yellow',
  67: 'yellow'
};

function createImageOnCanvas(imageId) {
  canvas.style.display = "block";
  document.getElementById("images").style.overflowY = "hidden";
  var img = new Image(300, 300);
  img.src = document.getElementById(imageId).src;
  context.drawImage(img, (0), (0)); //onload....
}

function draw(e) {
  var radius = document.getElementById("radius").value;

  var pos = getMousePos(canvas, e);
  posx = pos.x;
  posy = pos.y;
  context.fillStyle = color;
  context.beginPath();
  context.arc(posx, posy, radius, 0, 2 * Math.PI);
  context.fill();

}

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

window.draw = draw;

function reset() {
  var canvas = document.getElementById("circles");
  var context = canvas.getContext("2d");
  canvas.width = canvas.width;
}

//bind the handler to the element where the keypress should happen - you may want to filterout the input element here
window.addEventListener('keypress', function(event) {
  var x = event.charCode || event.keyCode;
  if (colorMap[x]) {
    color = colorMap[x];
  }
})

＆＃13;

<div id="images"></div>
<canvas id="circles" width="600" height="450" style="border:1px solid #000000;" onclick="draw(event)"></canvas>
<label for="radius">Enter circle radius:</label>
<input name="radius" id="radius" required autofocus />
<button onclick="reset()">reset!</button>

＆＃13;

Answer 2

以下是您尝试做的事情：http://jsfiddle.net/1qkL4kuk/1/

您已接近您的方法，但您想要添加如下关键的聆听功能：

window.onkeyup = function(e) {
    var x = e.keyCode ? e.keyCode : e.which;

    if (x == 66 || x == 98) {  
        fill = 'blue';
    } else if (x == 82 || x == 114) {  
        fill = 'red';
    } else if (x == 71 || x == 103) {  
        fill = 'green';
    } else if (x == 89 || x == 121) {  
        fill = 'yellow';
    } else if (x == 80 || x == 112) {  
        fill = 'purple';
    }
}

在你的绘图功能中，你只需要：

context.fillStyle = fill;

使用键更改圆圈的颜色

2 个答案: