34 lines
672 B
HTML
34 lines
672 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<script>
|
|
function draw() {
|
|
var ctx = document.getElementById('c').getContext('2d');
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(75, 75, 74, 0, 2 * Math.PI);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
|
|
ctx.globalCompositeOperation = 'destination-out';
|
|
ctx.beginPath();
|
|
ctx.arc(75, 75, 40, 0, 2 * Math.PI);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
|
|
ctx.globalCompositeOperation = 'source-over';
|
|
ctx.lineWidth = 10;
|
|
ctx.strokeStyle = 'green';
|
|
ctx.beginPath();
|
|
ctx.arc(75, 75, 40, 0, 2 * Math.PI);
|
|
ctx.closePath();
|
|
ctx.stroke();
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload='draw()' style='background: white;'>
|
|
<canvas id='c' width='200' height='200'></canvas>
|
|
</body>
|
|
</html>
|