使用JavaScript通過下拉列表更改HTML5畫布大小

Question

我正在尋找一些好的指導。 我需要從下拉列表中選擇特定的畫布大小。 這可能是一個初學者的問題，但是我不熟悉JavaScript（我知道它與Java不同），希望有人可以指出正確的方向。 以下是我到目前為止的情況。 如您所見，它的HTML調用了一個可能的腳本，名稱為signs_7x10 ... etc。 如果需要更多代碼，我可以提供它。 但是，我要的是在更改選項時讓畫布重新調整大小。 如果我沒記錯的話， 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/