How to make html button call external javascript drawing function
Question
So my end goal is to have a simple webpage with say 10 buttons and each button, upon being clicked, calls a different javascript function. Each of these functions would be some sort of drawing. To start I'm just trying to get used to buttons calling external js files.
<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>
Above is my html file and below is the javascript file from which I am trying to call the function.
function setup() {
createCanvas(1300, 800);
}
function draw(){
ellipse(100,100,80,80);
}
The button appears but after it is clicked nothing else happens. I would like the button to disappear after being clicked and only the ellipse to remain. Is this a possibility? I'm very new to web development (I started yesterday) so I'm sorry if this is a really easy problem to solve.
1 answers
solution1
1 2015-10-26 15:32:24
I don't know if this can help but.. As shown you can call the second function draw() inside the setup() function, JSFiddle
Updated
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();
}
for more than one button just give each one of them an id and make a js var for each one:
btn1 = document.getElementById("myBtn1");
btn2 = document.getElementById("myBtn2");
Note: code802, just something worthy to mention, I'd go with SVG drawing over canvas for:
- more support
- SVG is vector graphics mean no pixel-ating or blurry edges no matter how much you zoom on or what the screen resolution is.
- It can be external or css, img, object or inner-html or src.
- It could be cached in many cases.
- you can also manipulate it and animate it almost any way you want and anything you can do with canvas can do with svg
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.