I would like to make dots flash off in html canvas. Here is the code in which I tried by reducing the radius of the dot to zero. But it seems to be happening too fast to see it. Is there any way around this?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="application/javascript">
var xdots = [];
var ydots = [];
function getRandomInt(max) {
return Math.floor(Math.random() * max);
}
var t = getRandomInt(10);
function draw() { crosshairlength;
var lengthyminus = crosshairlength;
var lengthyplus = crosshairlength;
ctx.moveTo((x/2)-lengthxminus, y/2);
ctx.lineTo((x/2)+lengthxplus, y/2);
//horizontal line
ctx.moveTo((x/2)-
const canvas = document.getElementById('canvas');
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
var x = canvas.width;
var y = canvas.height;
setInterval(myTimer, t*100);
function myTimer() {
ctx.beginPath();
var ret = 1000;
function radius() {
for (let i=1;i<=10;i++) {
ret = 10-i;
console.log(ret + ' =10-' + i);
}
return ret;
}
ctx.fillStyle = '#0000'; //black
var crosshairlength = 20;
var lengthxminus = crosshairlength;
var lengthxplus = crosshairlength;
var lengthyminus = crosshairlength;
var lengthyplus = crosshairlength;
ctx.moveTo((x/2)-lengthxminus, y/2);
ctx.lineTo((x/2)+lengthxplus, y/2);
//horizontal line
ctx.moveTo((x/2)-lengthxminus, y/2);
ctx.lineTo((x/2)+lengthxplus, y/2);
//vertical line
ctx.moveTo(x/2, (y/2)-lengthyminus);
ctx.lineTo(x/2, (y/2)+lengthyplus);
ctx.strokeStyle ='#000000';
ctx.stroke();
var w = getRandomInt(x);
var h = getRandomInt(y);<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="application/javascript">
var xdots = [];
var ydots = [];
function getRandomInt(max) {
return Math.floor(Math.random() * max);
}
var t = getRandomInt(10);
function draw() { crosshairlength;
var lengthyminus = crosshairlength;
var lengthyplus = crosshairlength;
ctx.moveTo((x/2)-lengthxminus, y/2);
ctx.lineTo((x/2)+lengthxplus, y/2);
//horizontal line
ctx.moveTo((x/2)-
const canvas = document.getElementById('canvas');
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
var x = canvas.width;
var y = canvas.height;
setInterval(myTimer, t*100);
function myTimer() {
ctx.beginPath();
var ret = 1000;
function radius() {
for (let i=1;i<=10;i++) {
ret = 10-i;
console.log(ret + ' =10-' + i);
}
return ret;
}
ctx.fillStyle = '#0000'; //black
var crosshairlength = 20;
var lengthxminus = crosshairlength;
var lengthxplus = crosshairlength;
var lengthyminus = crosshairlength;
var lengthyplus = crosshairlength;
ctx.moveTo((x/2)-lengthxminus, y/2);
ctx.lineTo((x/2)+lengthxplus, y/2);
//horizontal line
ctx.moveTo((x/2)-lengthxminus, y/2);
ctx.lineTo((x/2)+lengthxplus, y/2);
//vertical line
ctx.moveTo(x/2, (y/2)-lengthyminus);
ctx.lineTo(x/2, (y/2)+lengthyplus);
ctx.strokeStyle ='#000000';
ctx.stroke();
var w = getRandomInt(x);
var h = getRandomInt(y);
w.push(xdots);
h.push(ydots);
ctx.beginPath();
ctx.fillStyle = "blue"; //blue
ctx.arc(w,h,radius(),0,Math.PI*2);
ctx.fill();
//Clear top left corner
ctx.beginPath();
ctx.fillStyle = "white"; //white
ctx.fillRect(0,0,x/2-lengthxminus,y/2-lengthyminus);
ctx.fill();
}
}
}
</script>
</head>
<h1>Peripheral vision checker</h1>
<body onload="draw();">
<canvas id="canvas" width="1846" height="768"></canvas>
</body>
</html>
w.push(xdots);
h.push(ydots);
ctx.beginPath();
ctx.fillStyle = "blue"; //blue
ctx.arc(w,h,radius(),0,Math.PI*2);
ctx.fill();
//Clear top left corner
ctx.beginPath();
ctx.fillStyle = "white"; //white
ctx.fillRect(0,0,x/2-lengthxminus,y/2-lengthyminus);
ctx.fill();
}
}
}
</script>
</head>
<h1>Peripheral vision checker</h1>
<body onload="draw();">
<canvas id="canvas" width="1846" height="768"></canvas>
</body>
</html>
Well Written Beautiful Post!
ReplyDeletehere is my post related to html canvas.
you may like.
Convert HTML to Canvas Javascript