HTML Canvas
Here is the JavaScript for the first of my experiments with the HTML Canvas tag.
var example;
var context;
var b =0;
function init() {
example = document.getElementById('canvas1');
context = example.getContext('2d');
b=0;
draw();
}
function draw() {
context.fillStyle = "rgb(255,255,255)";
context.fillRect(0, 0, 400, 800);
var icCount = 12;
var number = Math.PI * 2 / icCount;
for (n=1; n<= icCount; n++) {
x = 200 + ((Math.sin(number * n * b)) * 150);
y = 150 + ((Math.tan(number * n * b)) * 100);
context.fillStyle = 'rgb(0,0,0)';
context.beginPath();
context.arc(x, y, 25, 0, Math.PI*2, true);
context.closePath();
context.fill();
}
b += 0.02;
setTimeout("draw()",33);
}
Link to page:
https://roguelj.co.uk/sineart/a1.php
Link to other pages in this series:
https://roguelj.co.uk/toybox/
Link to the W3C School page about the HTML Canvas
https://www.w3schools.com/html/html5_canvas.asp