HTML5 - Canvas パックマンのモンスターを描くJavaScript関数(2)

x,y座標ともに指定できるモンスター関数です。

サンプル



モンスター関数(2)の使い方

monster2(ctx,90,80,"#0a3");

モンスター関数(2)

function monster2(ctx,x,y,collor){
 y = y+28;
 ctx.fillStyle = collor;
    ctx.beginPath();
    ctx.moveTo(x,y);
    ctx.lineTo(x,y-14);
    ctx.bezierCurveTo(x,y-22,x+6,y-28,x+14,y-28);
    ctx.bezierCurveTo(x+22,y-28,x+28,y-22,x+28,y-14);
    ctx.lineTo(x+28,y);
    ctx.lineTo(x+23.333,y-5+0.333);
    ctx.lineTo(x+18.666,y);
    ctx.lineTo(x+14,y-5+0.333);
    ctx.lineTo(x+9.333,y);
    ctx.lineTo(x+4.666,y-5+0.333);
    ctx.lineTo(x,y);
    ctx.fill();
    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.moveTo(x+8,y-20);
    ctx.bezierCurveTo(x+5,y-20,x+4,y-17,x+4,y-15);
    ctx.bezierCurveTo(x+4,y-13,x+5,y-10,x+8,y-10);
    ctx.bezierCurveTo(x+11,y-10,x+12,y-13,x+12,y-15);
    ctx.bezierCurveTo(x+12,y-17,x+11,y-20,x+8,y-20);
    ctx.moveTo(x+20,y-20);
    ctx.bezierCurveTo(x+17,y-20,x+16,y-17,x+16,y-15);
    ctx.bezierCurveTo(x+16,y-13,x+17,y-10,x+20,y-10);
    ctx.bezierCurveTo(x+23,y-10,x+24,y-13,x+24,y-15);
    ctx.bezierCurveTo(x+24,y-17,x+23,y-20,x+20,y-20);
    ctx.fill();
    ctx.fillStyle = "black";
    ctx.beginPath();
    ctx.arc(x+18,y-14,2,0,Math.PI*2,true);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(x+6,y-14,2,0,Math.PI*2,true);
    ctx.fill();
}