我正在寻找一种方法，使图像填充（只有一个）基于下拉选择从选择开关。图像需要允许绘制（这是所有设置），但我似乎不知道HTML...

<img draggable="true" src="URL to image" crossorigin="anonymous"> <!-- small image that I want to be able to drag onto the canvas -->

<select name="map" id="map" onchange="setImage(this);" class="control control-lg">
<optgroup label="First">
<option value="URL to Image">Option 1</option>
</optgroup>
</select>

<div class="canvas-container">
<img src="" name="image-swap" /> <!-- Image that populates when first option is selected -->
<script>
function setImage(select){
  var image = document.getElementsByName("image-swap")[0];
  image.src = select.options[select.selectedIndex].value;
}  
</script>
</div>

这不允许我的其他图像被拖到画布中或画在上面。我可能是因为我不太懂画布。

编辑:CSS.canvas-container只指定100%的宽度

顺晟科技：

首先，这里不使用画布。 这是一个纯粹的Img标记，但这仍然可以从选定的选项呈现图像。一件事是，您需要几个选项，否则，您不会触发onchange事件。

现在，每个选项的更改都应该替换这个特定映像的src。

在画布上呈现会有很大不同。 首先，您必须创建

标记。

您可以在HTML代码中或从js中执行，例如:

要呈现img，需要画布和img路径上的2D上下文。 快速基本实现如下所示:

以下是文档： https://developer.mozilla.org/en-us/docs/web/api/canvasrenderingcontext2d/drawimage