Question

我有一个颜色选择下拉列表，但是当我选择颜色时，我需要画布来转动颜色。它需要使用事件处理程序。按照阵列中使用的顺序，每种颜色的颜色代码是＃8A2BE2，＃DC143C，＃E9967A，＃6B8E23和＃8B4513。这就是我所拥有的：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Project 3</title>
<meta charset="utf-8">
<meta name="description" content="P3">
<meta name="author" content="name">
<link rel="stylesheet" href="p3.css">
<script src="p3.js"> </script>
</head>
<body>
<canvas width="500" height="500" id="myCanvas"></canvas>
<form id="myForm">
    <select id="colorDropdown">
        <option>Select a Background Color</option>
    </select>
</form>
<button onclick="clearCanvas">Clear Canvas</button>
</body>
</html>

这是javascript

window.onload = function () {
let selectElement = document.getElementById('colorDropdown'),
  options = ["Blue Violet", "Crimson", "Dark Salmon", "Olive Drab", "Saddle Brown"];
for (let i = 0; i < options.length; i++) {
  let opt = options[i];
  let optionList = document.createElement("option");
  optionList.textContent = opt;
  optionList.value = opt;
  selectElement.appendChild(optionList)
}
}
document.getElementById('colorDropdown').onchange = function() {
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.fillStyle = document.getElementById('colorDropdown').value;
ctx.fill();
};

document.getElementById('clearCanvas').onclick =
function clearCanvas() {
let canvas = document.getElementById("myCanvas");
var context = canvas.getContext('2d');
context.save();
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);
context.restore();
}

Answer 1

如果要使用映射到颜色名称的十六进制代码，可以这样做：

更改

options = ["Blue Violet", "Crimson", "Dark Salmon", "Olive Drab", "Saddle Brown"];

到

options = [
    {"colorName": "Blue Violet", "hexCode": "#8A2BE2"},
    {"colorName": "Crimson", "hexCode": "#DC143C"},
    {"colorName": "Dark Salmon", "hexCode": "#E9967A"},
    {"colorName": "Olive Drab", "hexCode": "#6B8E23"},
    {"colorName": "Saddle Brown", "hexCode": "#8B4513"}
];

并更改

optionList.textContent = opt;
optionList.value = opt;

到

optionList.textContent = opt.colorName;
optionList.value = opt.hexCode;

如果您不想使用十六进制代码但使用下拉列表中的颜色名称，则应该在没有空格的情况下编写它们。（Blue Violet应写成BlueViolet）

你可以做的是删除空格，例如：

更改此行：

let opt = options[i];

到这一行：

let opt = options[i].replace(/\s/g, '');

注意：运行您提供的代码会产生

document.getElementById（...）为null

因为此ID document.getElementById('clearCanvas')不存在。

略微调整的代码：

＆＃13;

window.onload = function () {
    let selectElement = document.getElementById('colorDropdown'),
        options = [
            {"colorName": "Blue Violet", "hexCode": "#8A2BE2"},
            {"colorName": "Crimson", "hexCode": "#DC143C"},
            {"colorName": "Dark Salmon", "hexCode": "#E9967A"},
            {"colorName": "Olive Drab", "hexCode": "#6B8E23"},
            {"colorName": "Saddle Brown", "hexCode": "#8B4513"}
        ];

    for (let i = 0; i < options.length; i++) {
        let opt = options[i];
        let optionList = document.createElement("option");
        optionList.textContent = opt.colorName;
        optionList.value = opt.hexCode;
        selectElement.appendChild(optionList)
    }
}
document.getElementById('colorDropdown').onchange = function () {
    let c = document.getElementById("myCanvas");
    let ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.rect(20, 20, 150, 100);
    ctx.fillStyle = document.getElementById('colorDropdown').value;
    ctx.fill();
};

document.getElementById('clearCanvas').onclick =
    function clearCanvas() {
        let canvas = document.getElementById("myCanvas");
        var context = canvas.getContext('2d');
        context.save();
        context.setTransform(1, 0, 0, 1, 0, 0);
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.restore();
    }

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Project 3</title>
    <meta charset="utf-8">
    <meta name="description" content="P3">
    <meta name="author" content="name">
</head>
<body>
<canvas width="150" height="150" id="myCanvas"></canvas>
<form id="myForm">
    <select id="colorDropdown">
        <option>Select a Background Color</option>
    </select>
</form>
<button onclick="clearCanvas" id="clearCanvas">Clear Canvas</button>
</body>
</html>

＆＃13;

使用事件处理程序更改背景颜色，并重绘所有Canvas对象

1 个答案: