if\u6587\u3068switch\u6587\u306e\u5fa9\u7fd2<\/p>\n\n\n\n
\u30af\u30ea\u30c3\u30af\u3057\u305f\u5834\u6240\u306b\u5186\u306a\u3069\u306e\u56f3\u5f62\u3092\u63cf\u3044\u3066\u307f\u3088\u3046<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n\t<meta charset="utf-8">\n\t<title>\u30b7\u30f3\u30d7\u30eb\u30b9\u30bf\u30f3\u30d7<\/title>\n\t<script>\n\t\tlet canvas,context; \/\/\u30ad\u30e3\u30f3\u30d0\u30b9\n\t\tconst r = 60;\n\n\t\tconst init = () => {\n\t\t\t\/\/\u30ad\u30e3\u30f3\u30d0\u30b9\u306e\u53d6\u5f97\n\t\t\tcanvas = document.getElementById("canvas");\n\t\t\tcontext = canvas.getContext("2d");\n\t\t}\n\n\t\tconst draw = event => {\n\t\t\t\/\/\u30de\u30a6\u30b9\u30ab\u30fc\u30bd\u30eb\u4f4d\u7f6e\u306e\u53d6\u5f97\n\t\t\tconst rect = event.target.getBoundingClientRect();\n\t\t\tconst x = event.clientX - rect.left;\n\t\t\tconst y = event.clientY - rect.top;\n\t\t\t\/\/\u30b9\u30bf\u30f3\u30d7\u3092\u63cf\u753b\n\t\t\tconst shape = document.getElementById("shape").value;\n\t\t\tcontext.fillStyle = document.getElementById("color").value;\n\t\t\tif (shape == "circle") {\n\t\t\t\t\/\/\u5186\u3092\u63cf\u753b\n\t\t\t\tcontext.beginPath();\n\t\t\t\tcontext.arc(x,y,r,0,Math.PI*2);\n\t\t\t\tcontext.fill();\n\t\t\t} else if (shape == "rect") {\n\t\t\t\t\/\/\u6b63\u65b9\u5f62\u3092\u63cf\u753b\n\t\t\t\tcontext.fillRect(x-r,y-r,r*2,r*2);\n\t\t\t} else if (shape == "triangle") {\n\t\t\t\t\/\/\u4e09\u89d2\u5f62\u3092\u63cf\u753b\n\t\t\t\tdrawPolygon(3,x,y);\n\t\t\t} else if (shape == "pentagon") {\n\t\t\t\t\/\/\u4e94\u89d2\u5f62\u3092\u63cf\u753b\n\t\t\t\tdrawPolygon(5,x,y);\n\t\t\t}\n\t\t}\n\n\t\tconst drawPolygon = (n,x,y) => {\n\t\t\t\/\/\u6b63n\u89d2\u5f62\u306e\u63cf\u753b\n\t\t\tcontext.beginPath();\n\t\t\tfor (let i=0; i<n; i++) {\n\t\t\t\tconst angle = i\/n * Math.PI*2 - Math.PI\/2;\n\t\t\t\tconst tx = x + r * Math.cos(angle);\n\t\t\t\tconst ty = y + r * Math.sin(angle);\n\t\t\t\tif (i==0) {\n\t\t\t\t\tcontext.moveTo(tx,ty);\n\t\t\t\t} else {\n\t\t\t\t\tcontext.lineTo(tx,ty);\n\t\t\t\t}\n\t\t\t}\n\t\t\tcontext.fill();\n\t\t}\n\n\t\tconst clearCanvas = () => {\n\t\t\t\/\/\u30ad\u30e3\u30f3\u30d0\u30b9\u306e\u30af\u30ea\u30a2\n\t\t\tcontext.clearRect(0,0,canvas.width,canvas.height);\n\t\t}\n\t<\/script>\n\t<style>\n\t\tcanvas {border: thin solid #000000;}\n\t<\/style>\n\t<body onload="init()">\n\t<p>\u30b7\u30f3\u30d7\u30eb\u30b9\u30bf\u30f3\u30d7<\/p>\n\t<input type="button" value="\u30af\u30ea\u30a2" onclick="clearCanvas()">\n\t\u30b9\u30bf\u30f3\u30d7\u306e\u7a2e\u985e:<select id="shape">\n\t<option value="circle">\u5186\n\t<option value="rect">\u6b63\u65b9\u5f62\n\t<option value="triangle">\u4e09\u89d2\u5f62\n\t<option value="pentagon">\u3054\u89d2\u5f62\n\t<\/select>\n\t\u8272:<input type="color" id="color" value="#6699FF">\n\t<hr>\n\t<canvas id="canvas" width="800" height="600" onclick="draw(event)"><\/canvas>\n<\/body>\n<\/html>\n\n\n\t<\/body><\/code><\/pre><\/div>\n\n\n\n