I want to make squares I made with the Math.random() function disappear when my mouse moves over them. I tried many ways but can't seem to get it right. The mouse events i have eliminates my whole canvas when the cursor leaves the div (obviously) However, I just want a square to be removed if the cursor goes on it whether it be 1 or all of goes on all of them. This is my code I have so far:
<body> <div id="container" ONMOUSEOVER="document.getElementById('myCanvas').style.display='block'" ONMOUSEOUT="document.getElementById('myCanvas').style.display='none'"> <canvas id="myCanvas"> </canvas> <!-- <input type="button" id ="btn" value = "Generate Modre" onclick = "makeSquares()"/> --> </div> function draw(){ var dom = document.getElementById("myCanvas"); if (dom.getContext) { var ctx = dom.getContext('2d'); var width = window.innerWidth; var height = window.innerHeight; dom.width=width; // assign width to canvas dom.height=height; //assign height to canvas //use so squares aren't cut off positionW=window.innerWidth - 110; positionH=window.innerHeight - 110; function makeSquares(n){ for(let i = 0; i < n; i++){ var x = Math.random()* positionW; var y = Math.random()* positionH; //make squares colourful ctx.globalAlpha=0.5; //opacity var color = '#'+ Math.round(0xffffff * Math.random()).toString(16); ctx.fillStyle = color; //draw rectangle ctx.fillRect(x,y,100,100); } } //initialize makeSquares(100); } } draw(); 
没有评论:
发表评论