<!doctype html>
<html>
<head>
<title>canvasExample</title>
<meta charset='utf-8' />
</head>
<body onload="setInterval('myfunc()', 10)">
<canvas height='700' width='700' id='example'></canvas>
<script>
var sz = 30;
const canvas = document.querySelector('#example');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#' + Math.floor(Math.random()*16777215).toString(16);
function myfunc(){
ctx.clearRect(0,0,700,700);
for (let i = 0 ; i < 1000; i+=50){
trdraw(i+10,i+20,i+sz);
}
for (let i = 1000 ; i > 200; i-=50){
trdraw(i-10,i-20,i-sz);
}
sz++;
}
function trdraw(var1,var2,var3){
ctx.beginPath();
ctx.moveTo(var1,var1);
ctx.lineTo(var2,var3);
ctx.lineTo(var3,var1);
ctx.fill();
var1 = var1 - 10;
var2 = var2 + 10;
var3 = var3 + 10;
}
</script>
</body>
</html>
| 