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