<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title></title> | |
<style type="text/css"> | |
img{width: 500px;height: 500px;} | |
#myCanvas{margin-left: -503px;} | |
</style> | |
</head> | |
<body> | |
<img src="img/1.png" alt="" /> | |
<canvas id="myCanvas" width="500" height="500">sorry</canvas> | |
</body> | |
<script type="text/javascript"> | |
var myCanvas = document.getElementById("myCanvas"); | |
var ctx = myCanvas.getContext('2d'); | |
ctx.fillStyle = 'lightgray'; | |
ctx.fillRect(0,0,myCanvas.width,myCanvas.height); | |
ctx.globalCompositeOperation = 'destination-out'; | |
myCanvas.onmousedown = function(){ | |
document.onmousemove = function(e){ | |
var x = e.clientX -10; | |
var y = e.clientY -10; | |
ctx.beginPath(); | |
ctx.fillStyle = 'red'; | |
ctx.arc(x,y,10,0,Math.PI*2,true); | |
ctx.fill(); | |
ctx.closePath(); | |
} | |
} | |
</script> | |
</html> | |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title></title> | |
<style type="text/css"> | |
img{width: 500px;height: 500px;} | |
#myCanvas{margin-left: -503px;} | |
</style> | |
</head> | |
<body> | |
<img src="img/1.png" alt="" /> | |
<canvas id="myCanvas" width="500" height="500">sorry</canvas> | |
</body> | |
<script type="text/javascript"> | |
var myCanvas = document.getElementById("myCanvas"); | |
var ctx = myCanvas.getContext('2d'); | |
ctx.fillStyle = 'lightgray'; | |
ctx.fillRect(0,0,myCanvas.width,myCanvas.height); | |
ctx.globalCompositeOperation = 'destination-out'; | |
myCanvas.onmousedown = function(){ | |
document.onmousemove = function(e){ | |
var x = e.clientX -10; | |
var y = e.clientY -10; | |
ctx.beginPath(); | |
ctx.fillStyle = 'red'; | |
ctx.arc(x,y,10,0,Math.PI*2,true); | |
ctx.fill(); | |
ctx.closePath(); | |
} | |
} | |
</script> | |
</html> | |
