HTML5 Canvas ile özel bir şekil oluşturmak için, bir path(yol) oluşturabilir ve ardından closePath() yöntemini kullanarak onu kapatabiliriz. Şeklimizi oluşturan her bir alt yolu oluşturmak için lineTo(), arcTo(), quadraticCurveTo() veya bezierCurveTo() yöntemlerini kullanabiliriz.
Çıktı:
Kod:
|
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 ctx = canvas.getContext('2d'); ctx.beginPath(); //arc(x,y,r,sAngle,eAngle,counterclockwise); ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // dış çerçeve ctx.moveTo(110, 75); ctx.arc(75, 75, 35, 0, Math.PI, false); // ağız (saat yönünde) 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.stroke(); ctx.closePath(); </script> |
Çıktı 2:
Kod 2:
|
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 ctx = canvas.getContext('2d'); //gülen yüz ctx.beginPath(); //arc(x,y,r,sAngle,eAngle,counterclockwise); ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // dış çerçeve ctx.moveTo(110, 75); ctx.arc(75, 75, 35, 0, Math.PI, false); // ağız (saat yönünde) 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.stroke(); ctx.closePath(); //ağlayan yüz ctx.beginPath(); //arc(x,y,r,sAngle,eAngle,counterclockwise); ctx.arc(175, 75, 50, 0, Math.PI * 2, false); // Outer circle ctx.moveTo(200, 100); ctx.arc(175, 100, 25, 0, Math.PI, true); // Mouth (clockwise) ctx.moveTo(165, 65); ctx.arc(160, 65, 5, 0, Math.PI * 2, false); // Left eye ctx.moveTo(195, 65); ctx.arc(190, 65, 5, 0, Math.PI * 2, true); // Right eye ctx.stroke(); </script> |
Yorum Yap