All geek questions in one place

How to make the html function call an external JavaScript drawing function

So my ultimate goal is to have a simple web page with 10 buttons and each button, after clicking on it another javascript function is called. Each of these functions will be a kind of pattern. For starters, I'm just trying to get used to the buttons that invoke 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 a function.

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

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

A button appears, but nothing happens after it is pressed. I would like the button to disappear after clicking and only an ellipse remains. Is it possible? I am very new to web development (I started yesterday), so I'm sorry if this is a very simple problem to solve.

+4
source share
1

, , .. , draw() setup(), 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();
}

js var :

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

: code802, - , SVG, :

  • SVG - , , .
  • css, img, object inner-html src.
  • .
  • , , , svg

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

+1

Source: https://habr.com/ru/post/1613219/

More articles:


All Articles