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

我正在尋找一些很好的指導。我需要從下拉列表中獲得特定的Canvas大小。這可能是一個初學者問題，但我是JavaScript新手（我知道它與Java不一樣），希望有人能指出我正確的方向。以下是我到目前爲止。正如你可以看到它的HTML調用一個名爲signs_7x10 ...的可能腳本。如果需要更多的代碼，我可以提供它沒有問題。但是，更改選項時重新調整畫布的大小是我正在尋找的。如果我沒有錯誤7x10變成7000px X 10000px。使用javascript更改HTML5畫布大小通過下拉列表

再次感謝您的幫助！

</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>

來源

2016-03-08 Wchristner

有什麼'call_menu（）'方法的內容，什麼是'SIGNS'的價值？ –

不建議您從內聯HTML代碼（onclick =「」）調用事件處理程序。您應該獲取DOM引用，指向需要連接的各種元素，並使用JavaScript進行連線，而不是HTML。在HTML中完成時，您會獲得意大利麪代碼，並且您的onclick值將在全局包裝函數中執行。 –

所以你只需要它來解析類似於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>

來源

2016-03-08 22:19:03

正如我在我的評論中提到，你不應該使用聯事件佈線，而是你應該使用的DOM標準：

element.addEventListener("eventName", callbackFunction);

而且，似乎一個下拉列表，將更好地滿足您的需求，而不是多個超鏈接。

請參見本搗鼓遵循最佳實踐工作方案：https://jsfiddle.net/g7ysab0y/12/

來源

2016-03-08 22:22:39

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

回答

相關問題