JavaScript：canvasにアンパンマンを描く

JavaScriptプログラミング授業で出した課題

Canvas API（キャンバス）の図形描画の機能だけを使って、アンパンマンに出来るだけ似せた絵を描きなさい。

使った主な命令

fillRect（四角形）鼻とほっぺのてかっている部分
arc（円、円弧）顔の輪郭、鼻、ほっぺ
ellipse（楕円）目と眉毛

3つの図形描画だけで描けるとは！やはりアンパンマンはシンプルに出来ている。

プログラム

canvas_anpanman.html

1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width">
6    <title>canvasにアンパンマンを描く</title>
7    <style>*{margin: 0; padding:0;}</style>
8    <script>
9 
10        window.addEventListener("load", function(){
11            let canvas, g;
12 
13            // キャンバスの初期設定
14            canvas = document.getElementById("canvas");
15            g = canvas.getContext("2d");
16 
17            // キャンバスをグレーにする
18            g.fillStyle = "gray";
19            g.fillRect(0, 0, canvas.width, canvas.height);
20 
21            // 枠線の色と幅
22            g.strokeStyle = "black";
23            g.lineWidth = 2;
24 
25            // 顔の輪郭
26            g.beginPath();
27            g.fillStyle = "#E99460";    // アンパンマンの顔の色
28            g.arc(250, 250, 150, 0, Math.PI*2, false);
29            g.fill();
30 
31            // 顔の枠線
32            g.beginPath();
33            g.arc(250, 250, 150, 0, Math.PI*2, false);
34            g.stroke();
35 
36            // 鼻
37            g.beginPath();
38            g.fillStyle = "#E25204";    // 塗りつぶす色
39            g.arc(250, 250, 50, 0, Math.PI*2, false);
40            g.fill();
41 
42            // 鼻の枠線
43            g.beginPath();
44            g.arc(250, 250, 50, 0, Math.PI*2, false);
45            g.stroke();
46 
47            // 鼻の■（てかり）を描画
48            g.fillStyle = "white";  // てかりの色
49            g.fillRect(250, 240, 15, 15);
50             
51            // ほっぺ（左）
52            g.beginPath();
53            g.fillStyle = "#E25204";    // 塗りつぶす色
54            g.arc(150, 250, 50, 0, Math.PI*2, false);
55            g.fill();
56 
57            // ほっぺ（左）の枠線
58            g.beginPath();
59            g.arc(150, 250, 50, -Math.PI/2, Math.PI/2, false);
60            g.stroke();
61 
62            // ほっぺ（左）の■（てかり）を描画
63            g.fillStyle = "white";  // てかりの色
64            g.fillRect(150, 245, 15, 15);
65 
66            // ほっぺ（右）
67            g.beginPath();
68            g.fillStyle = "#E25204";    // 塗りつぶす色
69            g.arc(350, 250, 50, 0, Math.PI*2, false);
70            g.fill();
71 
72            // ほっぺ（右）の枠線
73            g.beginPath();
74            g.arc(350, 250, 50, -Math.PI/2, Math.PI/2, true);
75            g.stroke();
76 
77            // ほっぺ（右）の■（てかり）を描画
78            g.fillStyle = "white";  // 枠線の色
79            g.fillRect(350, 245, 15, 15);
80 
81            // 目（左）
82            g.beginPath();
83            g.fillStyle = "black";  // 塗りつぶす色
84            g.ellipse(200, 180, 10, 20, 0, 0, Math.PI*2);
85            g.fill();
86 
87            // 目（右）
88            g.beginPath();
89            g.fillStyle = "black";  // 塗りつぶす色
90            g.ellipse(300, 180, 10, 20, 0, 0, Math.PI*2);
91            g.fill();
92 
93            // 眉毛（左）
94            g.beginPath();
95            g.ellipse(200, 180, 30, 50, 0, 0, Math.PI, true);
96            g.stroke();
97 
98            // 眉毛（右）
99            g.beginPath();
100            g.ellipse(300, 180, 30, 50, 0, 0, Math.PI, true);
101            g.stroke();
102 
103            // 口
104            g.beginPath();
105            g.ellipse(250, 270, 95, 60, 0, Math.PI*1/5, Math.PI*4/5, false);
106            g.stroke();
107 
108        });
109    </script>
110</head>
111<body>
112    <h1>canvasにアンパンマンを描く</h1>
113    <canvas id="canvas" width="500" height="500"></canvas>
114</body>
115</html>