gpt4 book ai didi

javascript - 多个 html 按钮的一个 javascript 函数

转载 作者:行者123 更新时间:2023-12-03 01:00:00 26 4
gpt4 key购买 nike

奇怪的问题,但我有一个在 Canvas 上绘制的 JavaScript 函数。我在 HTML 上创建了使用该功能的按钮。我有多个具有不同图像源的按钮,我想将它们用于该功能,而无需多次重复该功能,只需更改 imgsrc。我尝试提供按钮 id,但你不应该有多个 id。我尝试使用类,但似乎不起作用。使用 AngularJS。

HTML

<md-button onclick="(new avatarCanvas()).body()" style="border: 3px solid black;"><input class="image" value="www.website.com/image1.png" type="hidden"></md-button>

<md-button onclick="(new avatarCanvas()).hair()" style="border: 3px solid black;"><input class="hair" value="www.website.com/image2.png" type="hidden"></md-button>

<md-button onclick="(new avatarCanvas()).hair()" style="border: 3px solid black;"><input class="hair" value="www.website.com/image3.png" type="hidden"></md-button>

<md-button onclick="(new avatarCanvas()).hair()" style="border: 3px solid black;"><input class="hair" value="www.website.com/image4.png" type="hidden"></md-button>

<md-button onclick="(new avatarCanvas()).hair()" style="border: 3px solid black;"><input class="hair" value="www.website.com/image5.png" type="hidden"></md-button>

JavaScript

var canvas1 = document.getElementById('layer1');
var ctx1 = canvas1.getContext('2d');

var canvas2 = document.getElementById('layer2');
var ctx2 = canvas2.getContext('2d');

var imageObj = new Image();

this.body = function() {
imageObj.onload = function() {
ctx1.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);
};
imageObj.src = document.getElementsByClassName("image").value;
}

this.hair = function() {
ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
imageObj.onload = function() {
ctx2.drawImage(imageObj, 64.43, 7, imageObj.width, imageObj.height);
};
imageObj.src = document.getElementsByClassName("hair").value;
}

最佳答案

我建议您在按钮上创建自定义指令来处理单击事件,因为它是重复任务。您可以添加自定义属性,例如“data-img-path”,而不是使用隐藏变量来传递图像路径。

例如:

<md-button data-load-avatar style="border: 3px solid black;" data-image-path="www.website.com/image1.png"  />

这里的“data-load-avatar”是一个自定义指令,您可以在其中添加单击事件并读取属性“data-image-path”并使用此图像路径在 Canvas 中加载该图像。这样您的代码也将变得干净且可维护。

关于javascript - 多个 html 按钮的一个 javascript 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52674240/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com