保存绘制的图层并更新图层切换器，而无需重新加载页面

<canvas id="myCanvas" width="800" height="600"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 绘制矩形图层
ctx.fillStyle = "red";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 绘制圆形图层
ctx.beginPath();
ctx.arc(canvas.width/2, canvas.height/2, 50, 0, 2*Math.PI);
ctx.fillStyle = "blue";
ctx.fill();

// 绘制线条图层
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(canvas.width, canvas.height);
ctx.strokeStyle = "green";
ctx.stroke();

var layerData = canvas.toDataURL();

// 假设图层切换器是一个<select>元素，id为layerSelector
var layerSelector = document.getElementById("layerSelector");

// 创建一个新的选项
var option = document.createElement("option");
option.text = "图层1";
option.value = layerData;

// 添加到图层切换器中
layerSelector.add(option);