あなたのAIアプリ

顔のキーポイント名

※鏡像

お絵かきのヒント

キャンバスの座標系

四角形の描画

fillRect(x, y, width, height); // 塗りつぶす
strokeRect(x, y, width, height); // 線を引く

円の描画

fillCircle(x, y, radius); // 塗りつぶす
strokeCircle(x, y, radius); // 線を引く

直線の描画

drawLine(x0, y0, x1, y1);

色の変更

setColor("red");
setColor("rgb(120, 50, 150)");

演習　解答例

• １. サングラス（四角）解答例

    // サングラス（四角）を描画
    setColor("black");
    fillRect(rightEye.x - 25, rightEye.y - 25, 50, 50);
    fillRect(leftEye.x - 25, leftEye.y - 25, 50, 50);
    drawLine(rightEye.x, rightEye.y, leftEye.x, leftEye.y);
    drawLine(rightEye.x, rightEye.y, rightEar.x, rightEar.y);
    drawLine(leftEye.x, leftEye.y, leftEar.x, leftEar.y);

  コピー
• ２. サングラス（丸）解答例

    // サングラス（丸）を描画
    setColor("rgba(0, 0, 0, 0.7)");
    fillCircle(rightEye.x, rightEye.y, 30, 30);
    fillCircle(leftEye.x, leftEye.y, 30, 30);
    setColor("black");
    drawLine(rightEye.x - 30, rightEye.y, leftEye.x + 30, leftEye.y);
    drawLine(rightEye.x + 30, rightEye.y, rightEar.x, rightEar.y);
    drawLine(leftEye.x - 30, leftEye.y, leftEar.x, leftEar.y);

  コピー
• ３. 涙 解答例

    // 涙を描画
    setColor("cyan");
    fillRect(rightEye.x -15, rightEye.y + 10, 30, 500);
    fillRect(leftEye.x - 15, leftEye.y + 10, 30, 500);

  コピー