{"id":25209,"date":"2024-02-25T14:51:19","date_gmt":"2024-02-25T05:51:19","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25209"},"modified":"2024-02-25T14:51:21","modified_gmt":"2024-02-25T05:51:21","slug":"javascript-%e3%81%8a%e7%b5%b5%e6%8f%8f%e3%81%8d%e3%82%a2%e3%83%97%e3%83%aa","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25209","title":{"rendered":"Javascript \u304a\u7d75\u63cf\u304d\u30a2\u30d7\u30ea"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\r\n&lt;html lang=\"en\">\r\n&lt;head>\r\n&lt;meta charset=\"UTF-8\">\r\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n&lt;title>Advanced Drawing App&lt;\/title>\r\n&lt;style>\r\n    canvas {\r\n        border: 2px solid #000;\r\n        cursor: crosshair;\r\n    }\r\n    #toolbar {\r\n        margin-bottom: 10px;\r\n    }\r\n&lt;\/style>\r\n&lt;\/head>\r\n&lt;body>\r\n&lt;div id=\"toolbar\">\r\n    &lt;label for=\"colorPicker\">Color:&lt;\/label>\r\n    &lt;input type=\"color\" id=\"colorPicker\" value=\"#000\">\r\n    &lt;label for=\"thickness\">Thickness:&lt;\/label>\r\n    &lt;input type=\"range\" id=\"thickness\" min=\"1\" max=\"20\" value=\"5\">\r\n    &lt;button id=\"pencil\">Pencil&lt;\/button>\r\n    &lt;button id=\"line\">Line&lt;\/button>\r\n    &lt;button id=\"rectangle\">Rectangle&lt;\/button>\r\n    &lt;button id=\"circle\">Circle&lt;\/button>\r\n    &lt;button id=\"undo\">Undo&lt;\/button>\r\n    &lt;button id=\"redo\">Redo&lt;\/button>\r\n    &lt;button id=\"clear\">Clear&lt;\/button>\r\n&lt;\/div>\r\n&lt;canvas id=\"drawingCanvas\" width=\"800\" height=\"600\">&lt;\/canvas>\r\n\r\n&lt;script>\r\n    const canvas = document.getElementById('drawingCanvas');\r\n    const context = canvas.getContext('2d');\r\n    let isDrawing = false;\r\n    let lastX = 0;\r\n    let lastY = 0;\r\n    let color = '#000';\r\n    let thickness = 5;\r\n    let isEraser = false;\r\n    let lines = &#91;];\r\n    let currentLine = null;\r\n\r\n    function startDrawing(e) {\r\n        isDrawing = true;\r\n        &#91;lastX, lastY] = &#91;e.offsetX, e.offsetY];\r\n        currentLine = {\r\n            color,\r\n            thickness,\r\n            points: &#91;{ x: lastX, y: lastY }]\r\n        };\r\n    }\r\n\r\n    function stopDrawing() {\r\n        isDrawing = false;\r\n        if (currentLine) {\r\n            lines.push(currentLine);\r\n            currentLine = null;\r\n        }\r\n    }\r\n\r\n    function draw(e) {\r\n        if (!isDrawing) return;\r\n\r\n        const x = e.offsetX;\r\n        const y = e.offsetY;\r\n\r\n        context.beginPath();\r\n        context.moveTo(lastX, lastY);\r\n        context.lineTo(x, y);\r\n        context.strokeStyle = isEraser ? '#fff' : color;\r\n        context.lineWidth = isEraser ? thickness * 2 : thickness;\r\n        context.lineCap = 'round';\r\n        context.stroke();\r\n\r\n        currentLine.points.push({ x, y });\r\n\r\n        &#91;lastX, lastY] = &#91;x, y];\r\n    }\r\n\r\n    function changeColor(e) {\r\n        color = e.target.value;\r\n    }\r\n\r\n    function changeThickness(e) {\r\n        thickness = e.target.value;\r\n    }\r\n\r\n    function toggleEraser() {\r\n        isEraser = !isEraser;\r\n        document.getElementById('pencil').textContent = isEraser ? 'Pencil' : 'Eraser';\r\n    }\r\n\r\n    function drawLine() {\r\n        isEraser = false;\r\n        document.getElementById('pencil').textContent = 'Pencil';\r\n        canvas.removeEventListener('mousedown', startDrawing);\r\n        canvas.removeEventListener('mousemove', draw);\r\n        canvas.removeEventListener('mouseup', stopDrawing);\r\n        canvas.removeEventListener('mouseout', stopDrawing);\r\n        canvas.addEventListener('mousedown', startDrawing);\r\n        canvas.addEventListener('mousemove', drawLinePreview);\r\n        canvas.addEventListener('mouseup', drawLineFinish);\r\n        canvas.addEventListener('mouseout', drawLineFinish);\r\n    }\r\n\r\n    function drawLinePreview(e) {\r\n        if (!isDrawing) return;\r\n\r\n        context.clearRect(0, 0, canvas.width, canvas.height);\r\n        context.beginPath();\r\n        context.moveTo(lastX, lastY);\r\n        context.lineTo(e.offsetX, e.offsetY);\r\n        context.strokeStyle = color;\r\n        context.lineWidth = thickness;\r\n        context.lineCap = 'round';\r\n        context.stroke();\r\n    }\r\n\r\n    function drawLineFinish(e) {\r\n        if (!isDrawing) return;\r\n\r\n        context.clearRect(0, 0, canvas.width, canvas.height);\r\n        draw(e);\r\n        canvas.removeEventListener('mousemove', drawLinePreview);\r\n        canvas.removeEventListener('mouseup', drawLineFinish);\r\n        canvas.removeEventListener('mouseout', drawLineFinish);\r\n        canvas.addEventListener('mousedown', startDrawing);\r\n        canvas.addEventListener('mousemove', draw);\r\n        canvas.addEventListener('mouseup', stopDrawing);\r\n        canvas.addEventListener('mouseout', stopDrawing);\r\n    }\r\n\r\n    function drawRectangle() {\r\n        isEraser = false;\r\n        document.getElementById('pencil').textContent = 'Pencil';\r\n        canvas.removeEventListener('mousedown', startDrawing);\r\n        canvas.removeEventListener('mousemove', draw);\r\n        canvas.removeEventListener('mouseup', stopDrawing);\r\n        canvas.removeEventListener('mouseout', stopDrawing);\r\n        canvas.addEventListener('mousedown', startDrawing);\r\n        canvas.addEventListener('mousemove', drawRectanglePreview);\r\n        canvas.addEventListener('mouseup', drawRectangleFinish);\r\n        canvas.addEventListener('mouseout', drawRectangleFinish);\r\n    }\r\n\r\n    function drawRectanglePreview(e) {\r\n        if (!isDrawing) return;\r\n\r\n        context.clearRect(0, 0, canvas.width, canvas.height);\r\n        const width = e.offsetX - lastX;\r\n        const height = e.offsetY - lastY;\r\n        context.strokeRect(lastX, lastY, width, height);\r\n    }\r\n\r\n    function drawRectangleFinish(e) {\r\n        if (!isDrawing) return;\r\n\r\n        const width = e.offsetX - lastX;\r\n        const height = e.offsetY - lastY;\r\n        context.clearRect(0, 0, canvas.width, canvas.height);\r\n        context.strokeRect(lastX, lastY, width, height);\r\n        stopDrawing();\r\n        canvas.removeEventListener('mousemove', drawRectanglePreview);\r\n        canvas.removeEventListener('mouseup', drawRectangleFinish);\r\n        canvas.removeEventListener('mouseout', drawRectangleFinish);\r\n        canvas.addEventListener('mousedown', startDrawing);\r\n        canvas.addEventListener('mousemove', draw);\r\n        canvas.addEventListener('mouseup', stopDrawing);\r\n        canvas.addEventListener('mouseout', stopDrawing);\r\n    }\r\n\r\n    function drawCircle() {\r\n        isEraser = false;\r\n        document.getElementById('pencil').textContent = 'Pencil';\r\n        canvas.removeEventListener('mousedown', startDrawing);\r\n        canvas.removeEventListener('mousemove', draw);\r\n        canvas.removeEventListener('mouseup', stopDrawing);\r\n        canvas.removeEventListener('mouseout', stopDrawing);\r\n        canvas.addEventListener('mousedown', startDrawing);\r\n        canvas.addEventListener('mousemove', drawCirclePreview);\r\n        canvas.addEventListener('mouseup', drawCircleFinish);\r\n        canvas.addEventListener('mouseout', drawCircleFinish);\r\n    }\r\n\r\n    function drawCirclePreview(e) {\r\n        if (!isDrawing) return;\r\n\r\n        context.clearRect(0, 0, canvas.width, canvas.height);\r\n        const radius = Math.sqrt(Math.pow(e.offsetX - lastX, 2) + Math.pow(e.offsetY - lastY, 2));\r\n        context.beginPath();\r\n        context.arc(lastX, lastY, radius, 0, Math.PI * 2);\r\n        context.stroke();\r\n    }\r\n\r\n    function drawCircleFinish(e) {\r\n        if (!isDrawing) return;\r\n\r\n        const radius = Math.sqrt(Math.pow(e.offsetX - lastX, 2) + Math.pow(e.offsetY - lastY, 2));\r\n        context.clearRect(0, 0, canvas.width, canvas.height);\r\n        context.beginPath();\r\n        context.arc(lastX, lastY, radius, 0, Math.PI * 2);\r\n        context.stroke();\r\n        stopDrawing();\r\n        canvas.removeEventListener('mousemove', drawCirclePreview);\r\n        canvas.removeEventListener('mouseup', drawCircleFinish);\r\n        canvas.removeEventListener('mouseout', drawCircleFinish);\r\n        canvas.addEventListener('mousedown', startDrawing);\r\n        canvas.addEventListener('mousemove', draw);\r\n        canvas.addEventListener('mouseup', stopDrawing);\r\n        canvas.addEventListener('mouseout', stopDrawing);\r\n    }\r\n\r\n    function undo() {\r\n        lines.pop();\r\n        redraw();\r\n    }\r\n\r\n    function redo() {\r\n        \/\/ \u672a\u5b9f\u88c5\r\n    }\r\n\r\n    function clearCanvas() {\r\n        context.clearRect(0, 0, canvas.width, canvas.height);\r\n        lines = &#91;];\r\n    }\r\n\r\n    function redraw() {\r\n        clearCanvas();\r\n        lines.forEach(line => {\r\n            context.strokeStyle = line.color;\r\n            context.lineWidth = line.thickness;\r\n            context.beginPath();\r\n            context.moveTo(line.points&#91;0].x, line.points&#91;0].y);\r\n            line.points.forEach(point => context.lineTo(point.x, point.y));\r\n            context.stroke();\r\n        });\r\n    }\r\n\r\n    canvas.addEventListener('mousedown', startDrawing);\r\n    canvas.addEventListener('mousemove', draw);\r\n    canvas.addEventListener('mouseup', stopDrawing);\r\n    canvas.addEventListener('mouseout', stopDrawing);\r\n\r\n    document.getElementById('colorPicker').addEventListener('change', changeColor);\r\n    document.getElementById('thickness').addEventListener('input', changeThickness);\r\n    document.getElementById('pencil').addEventListener('click', toggleEraser);\r\n    document.getElementById('line').addEventListener('click', drawLine);\r\n    document.getElementById('rectangle').addEventListener('click', drawRectangle);\r\n    document.getElementById('circle').addEventListener('click', drawCircle);\r\n    document.getElementById('undo').addEventListener('click', undo);\r\n    document.getElementById('redo').addEventListener('click', redo);\r\n    document.getElementById('clear').addEventListener('click', clearCanvas);\r\n&lt;\/script>\r\n&lt;\/body>\r\n&lt;\/html>\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[78,4],"tags":[41,3],"class_list":["post-25209","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming","tag-javascript","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25209","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25209"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25209\/revisions"}],"predecessor-version":[{"id":25210,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25209\/revisions\/25210"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25209"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}