Question

我正在寻找一些好的指导。我需要从下拉列表中获得特定的Canvas大小。这可能是一个初学者的问题，但我是JavaScript的新手（我知道它与Java不同），希望有人可以指出我正确的方向。以下是我到目前为止的情况。正如你可以看到它的HTML通过名称signs_7x10等来调用可能的脚本。如果需要更多代码，我可以提供它没问题。但是，当选项被更改时，让画布重新调整大小是我正在寻找的。如果我没有弄错7x10变成7000px X 10000px。

再次感谢您的帮助！

</li> 
<li> 
<a href="#">Canvis Size</a> 
<ul> 
<li><a onclick="call_menu(SIGNS, 'signs_7x10');" href="#">7"x10"...</a><canvas width="500" height="500"> 
</canvas></li> 
<li><a onclick="call_menu(SIGNS, 'signs_10x14');" href="#">10"x14"...</a>     </li> 
<li><a onclick="call_menu(SIGNS, 'signs_12x18');" href="#">12"x18"</a></li> 
<li><a onclick="call_menu(SIGNS, 'signs_18x25');" href="#">18"x24"...</a>    </li> 
<li><a onclick="call_menu(SIGNS, 'signs_2x3');" href="#">2'x3'...</a></li> 
<li><a onclick="call_menu(SIGNS, 'signs_2x8');" href="#">2'x8'...</a></li> 
<li><a onclick="call_menu(SIGNS, 'signs_3x12');" href="#">3'x12'"...</a>    </li> 
<li><a onclick="call_menu(SIGNS, 'signs_4x4);" href="#">4'x4'...</a></li> 
<li><a onclick="call_menu(SIGNS, 'signs_4x8');" href="#">4'x8'...</a></li> 
</ul>

Answer 1

所以你只需要它来解析类似于signs_7x10的值，对吗？不确定这是否完全是您所追求的，但您可以使用此正则表达式解析xy值：/\d+x\d+/

Array.prototype.forEach.call(document.querySelectorAll('a[data-size]'), function(el){
  el.addEventListener('click', function(e){
    e.preventDefault();
    call_menu('???', this.getAttribute('data-size'));
  });
});

function call_menu(ಠ_ಠ, size){
    var element = document.querySelector('canvas');
    var dimensions = size.match(/\d+x\d+/).toString().split('x');
    element.width = dimensions[0] * 1000;
    element.height = dimensions[0] * 1000;
}

canvas {
  background: green;
}

<ul> 
<li><a data-size="signs_7x10" href="#">7"x10"...</a></li> 
<li><a data-size="signs_10x14" href="#">10"x14"...</a></li> 
<li><a data-size="signs_12x18" href="#">12"x18"</a></li> 
<li><a data-size="signs_18x25" href="#">18"x24"...</a></li> 
<li><a data-size="signs_2x3" href="#">2'x3'...</a></li> 
<li><a data-size="signs_2x8" href="#">2'x8'...</a></li> 
<li><a data-size="signs_3x12" href="#">3'x12'"...</a></li> 
<li><a data-size="signs_4x4" href="#">4'x4'...</a></li> 
<li><a data-size="signs_4x8" href="#">4'x8'...</a></li> 
</ul>

<canvas width=100 height=100></canvas>

Answer 2

正如我在评论中提到的，你不应该使用内联事件连接，而应该使用DOM标准：

 element.addEventListener("eventName", callbackFunction);

此外，似乎下拉列表更能满足您的需求，而不是多个超链接。

请参阅此小提琴，了解遵循最佳做法的有效解决方案：https://jsfiddle.net/g7ysab0y/12/

使用javascript通过下拉列表更改HTML5 Canvas大小

2 个答案: