HTML5 tuvalini kullanarak kırpma bölgesini tanımlamak için bir yol çizip tuval içeriğinin clip() yöntemini kullanabiliriz. Daha sonra çizilen her şey kırpma bölgesinin içine bağlanacaktır. Kırpma bölgesi içindeki şeyleri çizdikten sonra,restore() yöntemiyle tuval içeriğini orijinal durumuna döndürebiliriz, böylece başka çizimler kırpma bölgesine bağlı olmaz.
Bu derste, bir daire çizerek ve sonra clip() kullanarak bir dairesel kırpma bölgesi tanımlayacağız ve sonra dairesel yolun içine kesilmiş birkaç daire çizeceğiz. Daha sonra, restore() yöntemiyle canvas içeriğini orijinal durumuna geri yükler ve ardından orijinal kırpma bölgesinin altına bir dikdörtgen çiziyoruz.
Çıktı:
Kod:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <canvas id="canvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 90; context.save(); context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = 'green'; context.fill(); context.clip(); context.beginPath(); context.rect(188, 50, 200, 100); context.fillStyle = 'yellow'; context.fill(); context.lineWidth = 7; context.strokeStyle = 'black'; context.stroke(); context.restore(); context.beginPath(); context.rect(188, 170, 200, 30); context.fillStyle = 'black'; context.fill(); </script> |
Yorum Yap