あなたのAIアプリ

顔のキーポイント名

お絵かきのヒント

キャンバスの座標系

四角形の描画

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

円の描画

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

直線の描画

drawLine(x0, y0, x1, y1);

色の変更

setColor("red"); // 赤色
setColor("cyan"); // 水色
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);

  コピー & 挿入