HTML5 Canvas kullanarak bir oval oluşturmak için bağlam state içine kaydedebilir, tuval içeriğini yatay olarak genişletebilir, bir daire çizebilir, tuval durumunu geri yükleyebilir ve ardından stil uygulayabiliriz.
Çı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 |
<canvas id="canvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var centerX = 0; var centerY = 0; var radius = 50; // durumu kaydet context.save(); context.translate(canvas.width / 2, canvas.height / 2); // dikey ölçekle context.scale(2, 1); context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.restore(); // stili uygula context.fillStyle = '#8ED6FF'; context.fill(); context.lineWidth = 5; context.strokeStyle = 'black'; context.stroke(); </script> |
Add comment