<!DOCTYPE html>
<html>
<body>
<img width="600" height="250"
src="https://i.pinimg.com/564x/a2/8b/be/a28bbeadc7bb1ecddc6b9c9f43769fcf.jpg"
style="border:0;position: absolute;">
<canvas id="myCanvas" width="600" height="250"
style="border:0;position: absolute;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
let canvasElement = document.getElementById("myCanvas");
let ctx = canvasElement.getContext("2d");
ctx.fillStyle='rgba(255, 255, 255, 0.8)';
ctx.fillRect(0,0,600,250);
ctx.globalCompositeOperation = 'xor'
ctx.beginPath();
ctx.arc(300, 125, 100, 0, 2 * Math.PI);
ctx.fill();
ctx.lineWidth = 0;
ctx.strokeStyle = 'rgba(0, 0, 0, 0.0)';
ctx.stroke();
</script>
</body>
</html>
@copyright MRcodingRoom
觀看更多文章請點MRcoding筆記
觀看更多文章請點MRcoding筆記
