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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值