HTML5 Canvas şeklini düz bir renkle doldurmak için, fillStyle özelliğini mavi gibi bir renk dizesine, #0000FF gibi bir hex değerine veya rgb (0,0,255) gibi bir RGB değerine ayarlayabiliriz ve sonra Şekli doldurmak için fill() yöntemini kullanın. Aksi belirtilmedikçe, HTML5 Canvas şekli için varsayılan dolgu stili siyahtır.
Not: Bir şeklin hem dolgusunu hem de konturunu ayarlarken, stroke() işleminden önce fill() kullandığınızdan emin olun. Aksi takdirde, dolgu vuruşun yarısını üst üste getirir.
Çı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 33 34 35 36 37 38 39 40 41 42 43 |
<canvas id="canvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); //dış çerçeve ctx.beginPath(); //arc(x,y,r,sAngle,eAngle,counterclockwise); ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // dış çerçeve ctx.lineWidth = 5; ctx.fillStyle = '#8ED6FF'; ctx.fill(); ctx.strokeStyle = 'blue'; ctx.stroke(); ctx.closePath(); //ağız çizimi ctx.beginPath(); ctx.moveTo(110, 75); //ctx.arc(75, 75, 35, 0, Math.PI, false); // ağız (saat yönünde) ctx.arc(75, 75, 32.5, Math.PI, 0, true); ctx.lineWidth = 5; ctx.fillStyle = '#ff0000'; ctx.fill(); ctx.strokeStyle = 'pink'; ctx.stroke(); ctx.closePath(); //gözlerin çizimi ctx.beginPath(); ctx.moveTo(65, 65); ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // sol göz ctx.moveTo(95, 65); ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // sağ göz ctx.lineWidth = 5; ctx.fillStyle = '#8ED6FF'; ctx.fill(); ctx.strokeStyle = 'blue'; ctx.stroke(); ctx.closePath(); </script> |
Yorum Yap