<!doctype html>
<html>
<head>
<title>canvasExample</title>
<meta charset='utf-8' />
</head>
<body onload="setInterval('myfunc()', 10)" onmousedown="fmouse()">
<canvas height='700' width='700' id='example'></canvas>
<script>
let sz_1 = 0;
let sz_2 = 0;
let sz_3 = 0;
let sz_4 = 0;
let t_1 = 50;
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);
trdraw1(270,500);
trdraw2(0,250,500);
trdraw3(0,250);
trdraw4(0,250,500);
}
function trdraw1(var1,var2){
ctx.beginPath();
ctx.moveTo(var1,var1);
ctx.lineTo(var1,var2);
ctx.lineTo(var2,var1);
ctx.fill();
}
function trdraw2(var1,var2,var3){
ctx.beginPath();
ctx.moveTo(var1,var2);
ctx.lineTo(var2,var2);
ctx.lineTo(var2,var3);
ctx.fill();
}
function trdraw3(var1,var2){
ctx.beginPath();
ctx.moveTo(var1,var2);
ctx.lineTo(var2,var1);
ctx.lineTo(var2,var2);
ctx.fill();
}
function trdraw4(var1,var2,var3){
ctx.beginPath();
ctx.moveTo(var2,var1);
ctx.lineTo(var3,var2);
ctx.lineTo(var2,var2);
ctx.fill();
}
function fmouse(){
var x = event.clientX-8;
var y = event.clientY-8;
alert(x+ " " + y);
}
</script>
</body>
</html>
| 