html按钮调用技术,如何使html按钮调用外部javascript绘图功能

所以我的最终目标是拥有一个简单的网页,其中包含10个按钮,每个按钮在被点击时调用不同的javascript函数.这些功能中的每一个都是某种绘图.首先,我只是习惯于调用外部js文件的按钮.

Draw me a circle!

上面是我的html文件,下面是我试图调用该函数的javascript文件.

function setup() {

createCanvas(1300, 800);

}

function draw(){

ellipse(100,100,80,80);

}

按钮出现但在点击后没有其他任何事情发生.我希望按钮在点击后消失,只留下椭圆.这有可能吗？我对网络开发很新(我昨天开始),所以如果这是一个非常容易解决的问题,我很抱歉.

解决方法:

我不知道这是否有用但是..如图所示你可以调用setup()函数中的第二个函数draw(),JSFiddle

更新

HTML：

Draw me a circle!

JS：

btn = document.getElementById("myBtn");

btn.onclick = function setup() {

btn.remove();

//alert("Function Setup!");

document.getElementById("holder").innerHTML = '';

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 var：

btn1 = document.getElementById("myBtn1");

btn2 = document.getElementById("myBtn2");

注意：

code802,值得一提的是,我将使用SVG绘制画布：

>更多支持

> SVG是矢量图形,无论您放大多少或屏幕分辨率是什么,都意味着无像素或模糊边缘.

>它可以是外部或css,img,object或inner-html或src.

>在许多情况下可以缓存它.

>你也可以操纵它并以任何你想要的方式为它制作动画,你可以用帆布做任何事情都可以用svg做

标签：javascript,html

来源： https://codeday.me/bug/20190706/1398251.html