HTML5 Canvas ile gölge eklemek için, tuval içeriğinin shadowColor, shadowBlur, shadowOffsetX ve shadowOffsetY özelliklerini kullanabiliriz.
Çıktı:
Kod:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <canvas id="canvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.rect(188, 40, 200, 100); context.fillStyle = 'red'; context.shadowColor = '#999'; context.shadowBlur = 20; context.shadowOffsetX = 15; context.shadowOffsetY = 15; context.fill(); </script> |
Resme gölge eleme
Çıktı 2:
Kod 2:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <canvas id="canvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj, 250, 50); }; imageObj.src = 'https://www.tasarimkodlama.com/wp-content/uploads/2019/04/001-happy.png' context.shadowColor = 'grey'; context.shadowBlur = 20; context.shadowOffsetX = 15; context.shadowOffsetY = 15; context.fill(); </script> |
Yorum Yap