<!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>
let s = 0;
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);
trdraw(250-s,250-s,0-s,250-s,250-s,0-s);
trdraw(250+s,250+s,500+s,250+s,250+s,500+s);
trdraw(250-s,250+s,0-s,250+s,250-s,500+s);
trdraw(250+s,250-s,250+s,0-s,500+s,250-s);
s = s + 1;
}
function trdraw(x1, y1, x2, y2, x3, y3){
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.fill();
}
</script>
</body>
</html>
| 