如何使HTML按钮调用外部JavaScript绘图函数

Question

如何使HTML按钮调用外部JavaScript绘图函数

4

我的最终目标是创建一个简单的网页，其中包含10个按钮，每个按钮被点击时都会调用不同的JavaScript函数。每个函数都将是某种绘图。首先，我只是想让按钮调用外部js文件。

    <html>
<head>
  <script type = "text/javascript" src="/Users/myname/Downloads/p5-release 3/empty-example/sketch.js">
  </script>

</head>

<body>
    <button onclick="setup();draw();">
        Draw me a circle!
    </button>
</body>
</html>

上面是我的HTML文件，下面是我正在尝试调用函数的JavaScript文件。

function setup() {
  createCanvas(1300, 800);
}

function draw(){
    ellipse(100,100,80,80);
}

- codeitup

1

你可能想从更简单的东西开始。你还需要指定椭圆被绘制在哪个画布上。https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_usage - Nibb

1

你可以使用JavaScript来设置元素的CSS以隐藏按钮。给按钮一个ID，例如btnDraw，然后在JavaScript中简单地说document.getElementById('btnDraw').css('display','none'); - Dane

@NibbCNoble 我该如何指定画布？当我在没有按钮按下的情况下进行操作时（只是在HTML中调用js函数），它仍然使用相同的JavaScript代码绘制椭圆。 - codeitup

失败在于您没有发布其定义的 createCanvas 和 draw 函数。请使用 console.log 确定脚本的哪些部分有效，哪些部分失败。 - br4nnigan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mi-Creativity · Accepted Answer

我不知道这是否有帮助，但是.. 如下所示，您可以在setup()函数中调用第二个函数draw()，JSFiddle

已更新

HTML：

<button id="myBtn">Draw me a circle!</button>
<div id="holder"></div>

JS:

btn = document.getElementById("myBtn");
btn.onclick = function setup() {
    btn.remove();
    //alert("Function Setup!");
    document.getElementById("holder").innerHTML = '<canvas id="myCanvas" width="490" height="220"></canvas>';
    draw();
}

function draw() {
    //alert("Function Draw!");
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var radius = 70;

    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    context.fillStyle = 'green';
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = '#003300';
    context.stroke();
}

如果有多个按钮，请为每个按钮分配一个id，并为每个按钮创建一个js变量：

btn1 = document.getElementById("myBtn1");
btn2 = document.getElementById("myBtn2");

注意：code802, 值得一提的是，我会选择使用SVG绘图而不是Canvas，因为：

支持更广泛
SVG是矢量图形，无论你缩放多少或屏幕分辨率如何，都不会有像素化或模糊边缘。
它可以是外部的、CSS、img、object或inner-html或src。
在许多情况下，它可以被缓存。
你也可以以几乎任何想要的方式操纵和动画化它，与Canvas相比，它能做到的任何事情都可以用SVG来实现。

https://css-tricks.com/using-svg/