<!DOCTYPE html>
<html>
<body>
<span>Without clip():</span>
<canvas id="myCanvas" width="300" height="300" style="border:4px solid #0000FF;">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var context= c.getContext("2d");
context.rect(50, 50, 200, 200);
context.lineWidth = 3;
context.stroke();
context.beginPath();
context.arc(230,230,50, 0, 2*Math.PI, true);
context.closePath();
context.lineWidth = 5;
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.arc(80,270,50, 0, Math.PI, true);
context.closePath();
context.lineWidth = 5;
context.fillStyle = 'red';
context.fill();
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(20, 20);
context.lineTo(20, 200);
context.lineTo(100, 130);
context.lineTo(100, 70);
context.closePath();
context.fillStyle = 'magenta';
context.fill();
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(120, 20);
context.lineTo(100, 40);
context.lineTo(160, 100);
context.closePath();
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.stroke();
</script>
<span>With clip():</span>
<canvas id="myCanvas2" width="300" height="300" style="border:4px solid #0000FF;">
</canvas>
<script>
var c = document.getElementById("myCanvas2");
var context = c.getContext("2d");
context.rect(50, 50, 200, 200);
context.lineWidth = 3;
context.stroke();
context.clip();
context.beginPath();
context.arc(230,230,50, 0, 2*Math.PI, true);
context.closePath();
context.lineWidth = 5;
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.arc(80,270,50, 0, Math.PI, true);
context.closePath();
context.lineWidth = 5;
context.fillStyle = 'red';
context.fill();
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(20, 20);
context.lineTo(20, 200);
context.lineTo(100, 130);
context.lineTo(100, 70);
context.closePath();
context.fillStyle = 'magenta';
context.fill();
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.moveTo(120, 20);
context.lineTo(100, 40);
context.lineTo(160, 100);
context.closePath();
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.stroke();
</script>
</body>
</html>
No comments:
Post a Comment
Note: only a member of this blog may post a comment.