使用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画布大小通过下拉列表

回答

相关问题