HTML Canvas 来自 Select 选项的函数

Question

我正在尝试创建一个简单的 html 页面，该页面显示 canvas 背景为大学地图。有一个下拉列表，用户可以 select 他们也想进入的房间，并且行将显示在 canvas 上，具体取决于 select 编辑的房间。

我试图根据 selection 调用这些不同的线路，但我正在努力寻找为什么这不起作用

<!DOCTYPE HTML>
<html>
<head>
<div>
<style type="text/css" media="screen">
canvas, img { display:block; margin:1em auto; border:1px solid black; }
canvas { background:url(pretendcollege.jpg) }
  </style>
<canvas id="c4" width="580" height = "580" ></canvas>
<div>

  <select   name="rooms" onchange="path(this.value)">
  <option value="">Please select</option>
  <option value="B223">B223</option>
  <option value="C174">C174</option>
  <option value="B170">B170</option>
</select>

</div> 
</div>

<script>
var c4 = document.getElementById("c4");
var c4_context = c4.getContext("2d");

function path(v) {
  switch(v) {
    case "B220":
    c4_context.beginPath();
    c4_context.moveTo(295, 473);
    c4_context.lineTo(295, 286);
    c4_context.lineTo(94, 286);
    c4_context.strokeStyle = "Red";
    c4_context.stroke();
  break;
case "C174":
  c4_context.beginPath();
    c4_context.moveTo(295, 473);
    c4_context.lineTo(295, 82);
    c4_context.lineTo(118, 82);
    c4_context.strokeStyle = "Blue";
    c4_context.stroke();
  break;
}
}
</script>
</html>

Answer 1

您的问题可能出在您调用 JS 时。您想要获取 canvas 标签及其上下文 在您 html 中创建它之后 ，但您想要将整个脚本放在之前你调用了 path() 函数。这是工作代码：

=== 已编辑 ===

yourHtmlFile.html

<!DOCTYPE HTML>
<html>
    <body>
       <div>
           <canvas id="c4" width="580" height="580" ></canvas>
            <select name="rooms" onchange="path(this.value)">
                <option value="">Please select</option>
                <option value="B223">B223</option>
                <option value="C174">C174</option>
                <option value="B170">B170</option>
            </select>
       </div> 
       <script src="yourOtherScript.js"></script>
    </body>
</html>

yourOtherScript.js

var c4 = document.getElementById("c4");
var c4_context = c4.getContext("2d");

function path(v) {
    switch(v) {
        case "B220":
            c4_context.beginPath();
            c4_context.moveTo(295, 473);
            c4_context.lineTo(295, 286);
            c4_context.lineTo(94, 286);
            c4_context.stroke();
            break;
        case "C174":
            c4_context.beginPath();
            c4_context.moveTo(295, 473);
            c4_context.lineTo(295, 82);
            c4_context.lineTo(118, 82);
            c4_context.stroke();
            break;
    }
}

看看我的fiddlehere

HTML Canvas 来自 Select 选项的函数

HTML Canvas Functions from Select Option

html

javascript

canvas