11. HTML5 Canvas [Global Alpha, Clipping Region]

Hello Canvas!!

How to use Global Alpha, Clipping Region

소스보기해서 주석을 읽어보자

[SOURCE VIEW]

<canvas id = "myCanvas" width = "600" height = "400" style = "border:1px solid #000000"> If you can see this, I'm sorry. <br /> You need to get <a href = "https://www.google.com/chrome/browser/desktop/index.html"> Google Chrome browser</a> to see HTNL5 Canvas </canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var x = 400; var y = 200; var radius = 100; var offset = 70; /* * save() allows us to save the canvas context before * defining the clipping region so that we can return * to the default state later on */ context.save(); context.beginPath(); context.arc(x, y, radius, 0, 2 * Math.PI, false); context.clip(); // draw blue circle inside clipping region context.beginPath(); context.arc(x - offset, y - offset, radius, 0, 2 * Math.PI, false); context.fillStyle = 'blue'; context.fill(); // draw yellow circle inside clipping region context.beginPath(); context.arc(x + offset, y, radius, 0, 2 * Math.PI, false); context.fillStyle = 'yellow'; context.fill(); // draw red circle inside clipping region context.beginPath(); context.arc(x, y + offset, radius, 0, 2 * Math.PI, false); context.fillStyle = 'red'; context.fill(); /* * restore() restores the canvas context to its original state * before we defined the clipping region */ context.restore(); context.beginPath(); context.arc(x, y, radius, 0, 2 * Math.PI, false); context.lineWidth = 10; context.strokeStyle = 'blue'; context.stroke(); //draw blue rectangle. context.beginPath(); context.rect(50,100,100,100); context.fillStyle = 'blue'; context.fill(); context.strokeStyle = 'yellow' context.lineWidth = 5; context.stroke(); //draw transparent red circle. context.globalAlpha = 0.5; context.beginPath(); context.arc(150,200, 60, 0, 2*Math.PI, false); context.fillStyle = 'red'; context.fill(); context.fillStyle = 'blue'; context.font = 'italic 30pt Calibri'; context.fillText('Clipping Region',280 , 350); context.font = 'italic 30pt Calibri'; context.fillText('Global Alpha',10 , 350); </script>

If you can see this, I'm sorry.
You need to get Google Chrome browser to see HTNL5 Canvas