0
私は色の選択のドロップダウンを持っていますが、色を選択するとその色を変えるキャンバスが必要です。イベントハンドラを使用する必要があります。配列の使用順に各色のカラーコードは＃8A2BE2、＃DC143C、＃E9967A、＃6B8E23、＃8B4513です。ここでは、私が持っているものです：あなたはこのようにそれを行うことができ、色名にマッピングされた16進コードを使用したい場合はここでイベントハンドラを使用して背景色を変更し、すべてのCanvasオブジェクトを再描画
<!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();
}