{"id":9345,"date":"2021-07-26T07:00:34","date_gmt":"2021-07-25T22:00:34","guid":{"rendered":"https:\/\/blog.capilano-fw.com\/?p=9345"},"modified":"2021-07-01T05:26:34","modified_gmt":"2021-06-30T20:26:34","slug":"laravel-canvas-%e3%81%a7%e5%ba%a7%e5%b8%ad%e4%bd%8d%e7%bd%ae%e3%82%92%e6%8c%87%e5%ae%9a%e3%81%99%e3%82%8b%e6%a9%9f%e8%83%bd%e3%82%92%e3%81%a4%e3%81%8f%e3%82%8b","status":"publish","type":"post","link":"https:\/\/blog.capilano-fw.com\/?p=9345","title":{"rendered":"Laravel + Canvas \u3067\u5ea7\u5e2d\u4f4d\u7f6e\u3092\u6307\u5b9a\u3059\u308b\u6a5f\u80fd\u3092\u3064\u304f\u308b"},"content":{"rendered":"

\u3055\u3066\u3055\u3066\u3001\u958b\u767a\u52b9\u7387\u3092\u7dad\u6301\u3059\u308b\u305f\u3081\u306b\u5fd9\u3057\u304f\u3066\u3082\u9031\u306b\u4e00\u5ea6\u306f\u304a\u4f11\u307f\u3092\u53d6\u3063\u3066\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u3001\u305d\u3093\u306a\u95a2\u4fc2\u3067\u305f\u307e\u306b\u6620\u753b\u9928\u306b\u884c\u3063\u305f\u308a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n

\u5148\u65e5\u3082\u6620\u753b\u306b\u884c\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u305d\u3053\u3067\u3053\u308c\u307e\u3067\u306f\u6c17\u306b\u306a\u3089\u306a\u304b\u3063\u305f\u3042\u308b\u3082\u306e\u306e\u5b58\u5728\u306b\u6c17\u304c\u3064\u304d\u307e\u3057\u305f\u3002<\/p>\n

\u305d\u308c\u304c\u30fb\u30fb\u30fb\u30fb\u30fb\u30fb<\/p>\n

\uff08\u5ea7\u5e2d\u307e\u3067\u9078\u3079\u308b\uff09\u30c1\u30b1\u30c3\u30c8\u81ea\u52d5\u8cfc\u5165\u6a5f<\/strong><\/p>\n

\u3067\u3059\u3002<\/p>\n

\u203b \u82e5\u3044\u65b9\u306f\u30a4\u30e1\u30fc\u30b8\u3057\u306b\u304f\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001\u5c11\u3057\u524d\u307e\u3067\u306f\u6620\u753b\u9928\u3067\u30c1\u30b1\u30c3\u30c8\u3092\u8cb7\u3046\u3068\u304d\u306f\u30b9\u30bf\u30c3\u30d5\u3055\u3093\u306b\u300c\u5927\u4eba\u25cf\u679a\u304f\u3060\u3055\u3044\u300d\u3068\u8a00\u3063\u3066\u30c1\u30b1\u30c3\u30c8\u3092\u8cb7\u3063\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\n

\u30ac\u30bd\u30ea\u30f3\u30b9\u30bf\u30f3\u30c9\u3068\u540c\u3058\u304f\u3001\u300c\u3053\u3093\u306a\u3068\u3053\u308d\u307e\u3067\u30aa\u30fc\u30c8\u30e1\u30fc\u30b7\u30e7\u30f3\u5316\u3057\u3066\u3044\u308b\u306e\u304b\ud83d\ude33<\/strong>\u300d\u3068\u611f\u52d5\u3057\u305f\u306e\u3067\u3059\u304c\u3001\u305d\u308c\u3068\u540c\u6642\u306b\u300c\u3053\u308c\u306f\u305c\u3072\u81ea\u5206\u3067\u3082\u4f5c\u3063\u3066\u307f\u305f\u3044\u306a<\/strong>\u300d\u3068\u601d\u3044\u307e\u3057\u305f\u3002<\/p>\n

\u305d\u3053\u3067\u2757<\/p>\n

\u4eca\u56de\u306fLaravel + Canvas<\/code>\u3067\u3001\u5ea7\u5e2d\u4f4d\u7f6e\u3092\u76ee\u3067\u898b\u306a\u304c\u3089\u6307\u5b9a\u3067\u304d\u308b\u6a5f\u80fd\u3092\u4f5c\u3063\u3066\u307f\u308b\u3053\u3068\u306b\u3057\u307e\u3059\u3002<\/p>\n

\u305c\u3072\u4f55\u304b\u306e\u53c2\u8003\u306b\u306a\u308a\u307e\u3057\u305f\u3089\u5b09\u3057\u3044\u3067\u3059\ud83d\ude0a\u2728<\/p>\n

\"\"\u300c\u30b7\u30c9\u30cb\u30a2\u306e\u9a0e\u58eb\u3001
\n\u9762\u767d\u304b\u3063\u305f\u3067\u3059\ud83d\udc4d\u300d<\/p>\n

\u958b\u767a\u74b0\u5883\uff1a<\/strong> Laravel 8.x\u3001Vue 3<\/p>\n

\u6e96\u5099\u3059\u308b<\/h1>\n

\u4eca\u56de\u30ad\u30e3\u30f3\u30d0\u30b9\u306b\u306f\u5ea7\u5e2d\u306e\u4f4d\u7f6e\u3092\u6c7a\u3081\u308b\u305f\u3081\u306b\u3001\u4ee5\u4e0b\u306e\u30a2\u30a4\u30b3\u30f3\uff08Font-Awesome\uff09\u3092\u4f7f\u3046\u3053\u3068\u306b\u3057\u307e\u3059\u3002<\/p>\n

\"\"<\/p>\n

\u306a\u304a\u3001Font-Awesome\uff4e<\/code>\u306eSVG<\/code>\u30d5\u30a1\u30a4\u30eb\u306f\u3001GitHub<\/code>\u3067\u516c\u958b\u3055\u308c\u3066\u308b\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306e\u4e2d\u304b\u3089\u53d6\u5f97\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n

\u305d\u306e\u305f\u3081\u3001\u4ee5\u4e0b\u304b\u3089ZIP\u30d5\u30a1\u30a4\u30eb\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\uff06\u5c55\u958b\u3057\u3001\u300cFont-Awesome-master\/svgs<\/strong>\u300d\u306e\u4e2d\u304b\u3089\u30d5\u30a1\u30a4\u30eb\u3092\u63a2\u3057\u3066\u300cpublic\/images<\/strong>\u300d\u30d5\u30a9\u30eb\u30c0\u306b\u5165\u308c\u3066\u304a\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n

\ud83d\udcdd \u30c0\u30a6\u30f3\u30ed\u30fc\u30c9URL\uff1a<\/strong> Font-Awesome<\/a><\/p>\n

\"\"<\/p>\n

\u307e\u305f\u3001\u5ea7\u5e2d\u306e\u30de\u30c3\u30d7\u753b\u50cf\u306f\u4ee5\u4e0b\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u6539\u9020\u3057\u3066\u4f7f\u308f\u305b\u3066\u3044\u305f\u3060\u304f\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002\uff08\u611f\u8b1d\u3067\u3059\u2728\uff09<\/p>\n

\ud83d\udcdd \u30c0\u30a6\u30f3\u30ed\u30fc\u30c9URL\uff1a<\/strong>\u00a0\u5ea7\u5e2d\u8868<\/a><\/p>\n

\u5b9f\u969b\u306e\u753b\u50cf\u306f\u3053\u3061\u3089<\/p>\n

\"\"<\/p>\n

\u30eb\u30fc\u30c8\u3092\u3064\u304f\u308b<\/h1>\n

routes\/web.php<\/strong><\/p>\n

Route::get('canvas_seats', fn() => view('canvas_seats'));<\/strong><\/pre>\n
\u306a\u304a\u3001\u4e0a\u306e\u30b3\u30fc\u30c9\u3067\u300c\u304a\u3084\u2753\u300d\u3068\u601d\u3063\u305f\u65b9\u3082\u3044\u3089\u3063\u3057\u3083\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n
\u305d\u3046\u3067\u3059\u3002\u4eca\u56de\u306fPHP 7.4<\/code>\u304b\u3089\u8ffd\u52a0\u3055\u308c\u305f\u300cArrow Function<\/strong>\u300d\u3092\u4f7f\u3063\u3066\u3044\u308b\u3093\u3067\u3059\u306d\u3002<\/p>\n
\u3061\u306a\u307f\u306b\u3001\u3053\u308c\u307e\u3067\u306e\u66f8\u304d\u65b9\u3060\u3068\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
Route::get('canvas_seats', function(){<\/strong>\r\n\r\n    return view('canvas_seats');<\/strong>\r\n\r\n});<\/strong><\/pre>\n
\u305a\u3044\u3076\u3093\u3068\u30b3\u30fc\u30c9\u91cf\u304c\u6e1b\u308b\u3053\u3068\u304c\u5206\u304b\u308b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n
\u203b \u79c1\u306e\u5834\u5408\u3001JavaScript<\/code>\u306e\u65b9\u3067\u306f\u3059\u3067\u306b\u307b\u307c\u30a2\u30ed\u30fc\u95a2\u6570\u3070\u304b\u308a\u4f7f\u3063\u3066\u3044\u308b\u306e\u3067\u3001\u3053\u308c\u304b\u3089\u306fPHP<\/code>\u306e\u65b9\u3067\u3082\uff08\u4f7f\u3044\u3069\u3053\u308d\u3092\u8003\u3048\u3064\u3064\ud83d\udc4d\uff09\u4f7f\u3063\u3066\u3044\u304d\u305f\u3044\u3068\u8003\u3048\u3066\u3044\u307e\u3059\uff01<\/p>\n
\u30d3\u30e5\u30fc\u3092\u3064\u304f\u308b<\/h1>\n
\u305d\u308c\u3067\u306f\u4eca\u56de\u306e\u30e1\u30a4\u30f3\u306b\u306a\u308b\u30d3\u30e5\u30fc\u3092\u3064\u304f\u308a\u307e\u3059\u3002<\/p>\n
resources\/views\/canvas_seats.blade.php<\/strong><\/p>\n
<html>\r\n<head>\r\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n    <style>\r\n\r\n        #canvas {\r\n\r\n            background-image: url(\"\/images\/seat_map.png\");\r\n            border: 1px solid #000;\r\n            cursor: crosshair;\r\n\r\n        }\r\n\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"app\" class=\"p-4\">\r\n    <canvas id=\"canvas\" ref=\"canvas\" width=\"640\" height=\"640\" @click=\"onCanvasClick\"><\/canvas>\r\n    <div class=\"p-3\">\r\n        <div v-if=\"movingSeatIndex >= 0\">\r\n            <div class=\"pb-2\">\r\n                \u30af\u30ea\u30c3\u30af\u3001\u3082\u3057\u304f\u306f\u5341\u5b57\u30ad\u30fc\u3092\u4f7f\u3063\u3066\u5e2d\u3092\u79fb\u52d5\u3057\u3066\u304f\u3060\u3055\u3044\u3002\r\n            <\/div>\r\n            <button type=\"button\" class=\"btn btn-primary\" @click=\"settleSeat\">\u78ba\u5b9a\u3059\u308b\uff08or Enter\u30ad\u30fc\uff09<\/button>\r\n        <\/div>\r\n        <div v-else>\r\n            \u753b\u9762\u4e0a\u306e\u5e2d\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u9078\u629e\u3059\u308b\u304b\u3001<a href=\"#\" @click.prevent=\"addSeat\">\u5e2d\u3092\u8ffd\u52a0<\/a> \u3057\u3066\u304f\u3060\u3055\u3044\u3002\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.9.2\/dist\/umd\/popper.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/js\/bootstrap.min.js\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/vue@3.1.1\/dist\/vue.global.prod.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/axios\/0.21.1\/axios.min.js\"><\/script>\r\n<script>\r\n\r\n    Vue.createApp({\r\n        data() {\r\n            return {\r\n                canvas: null,\r\n                context: null,\r\n                seatLocations: [],\r\n                movingSeatIndex: -1,\r\n                isShiftKeyDown: false\r\n            }\r\n        },\r\n        methods: {\r\n            drawCanvas() {\r\n\r\n                this.clearCanvas();\r\n\r\n                this.seatLocations.forEach(seatLocation => {\r\n\r\n                    let image = new Image();\r\n                    image.addEventListener('load', () => {\r\n\r\n                        this.context.drawImage(\r\n                            image,\r\n                            seatLocation.x,\r\n                            seatLocation.y,\r\n                            this.seatIconLength,\r\n                            this.seatIconLength\r\n                        );\r\n\r\n                    });\r\n                    image.src = '\/images\/chair.svg';\r\n\r\n                });\r\n\r\n                if(this.isSeatMoving) { \/\/ \u79fb\u52d5\u4e2d\u306e\u5e2d\u3092\u56f2\u3080\r\n\r\n                    this.context.beginPath();\r\n                    this.context.strokeStyle = 'red';\r\n                    this.context.rect(\r\n                        this.currentSeatLocation.x - 5,\r\n                        this.currentSeatLocation.y - 5,\r\n                        this.seatIconLength + 10,\r\n                        this.seatIconLength + 10\r\n                    );\r\n                    this.context.stroke();\r\n\r\n                }\r\n\r\n            },\r\n            clearCanvas() {\r\n\r\n                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\r\n\r\n            },\r\n            addSeat() { \/\/ \u65b0\u3057\u3044\u5e2d\u3092\u8ffd\u52a0\r\n\r\n                this.seatLocations.push({\r\n                    x: 10,\r\n                    y: 10\r\n                });\r\n                this.movingSeatIndex = this.seatLocations.length - 1;\r\n                this.drawCanvas();\r\n\r\n            },\r\n            settleSeat() {  \/\/ \u5e2d\u306e\u79fb\u52d5\u3092\u5b8c\u4e86\u3055\u305b\u308b\r\n\r\n                this.movingSeatIndex = -1;\r\n                this.drawCanvas();\r\n\r\n            },\r\n            onCanvasClick(e) {\r\n\r\n                const x = e.offsetX, y = e.offsetY;\r\n\r\n                if(this.isSeatMoving) {\r\n\r\n                    const halfSeatIconLength = this.seatIconLength * 0.5;\r\n                    this.seatLocations[this.movingSeatIndex] = {\r\n                        x: x - halfSeatIconLength,\r\n                        y: y - halfSeatIconLength\r\n                    };\r\n\r\n                } else {\r\n\r\n                    this.seatLocations.forEach((seatLocation, index) => {\r\n\r\n                        const rect = {\r\n                            startX: seatLocation.x,\r\n                            endX: seatLocation.x + this.seatIconLength,\r\n                            startY: seatLocation.y,\r\n                            endY: seatLocation.y + this.seatIconLength\r\n                        };\r\n\r\n                        if(rect.startX <= x && rect.endX >= x && rect.startY <= y && rect.endY >= y) { \/\/ \u7bc4\u56f2\u5185\u306a\u3089\u5e2d\u3092\u9078\u629e\r\n\r\n                            this.movingSeatIndex = index;\r\n\r\n                        }\r\n\r\n                    });\r\n\r\n                }\r\n\r\n                this.drawCanvas();\r\n\r\n            },\r\n            onKeydown(e) {\r\n\r\n                const key = e.key;\r\n\r\n                if(key === 'Shift') {\r\n\r\n                    this.isShiftKeyDown = true;\r\n\r\n                } else if(key === 'Enter') {\r\n\r\n                    this.settleSeat();\r\n\r\n                }\r\n\r\n                if(this.isSeatMoving) {\r\n\r\n                    let x = this.currentSeatLocation.x;\r\n                    let y = this.currentSeatLocation.y;\r\n                    const movingLength = (this.isShiftKeyDown) ? 25 : 1; \/\/ Shift \u3068\u4e00\u7dd2\u306e\u5834\u5408\u306f\u305f\u304f\u3055\u3093\u79fb\u52d5\u3059\u308b\r\n\r\n                    if(key === 'ArrowUp') {\r\n\r\n                        y -= movingLength;\r\n\r\n                    } else if(key === 'ArrowRight') {\r\n\r\n                        x += movingLength;\r\n\r\n                    } else if(key === 'ArrowDown') {\r\n\r\n                        y += movingLength;\r\n\r\n                    } else if(key === 'ArrowLeft') {\r\n\r\n                        x -= movingLength;\r\n\r\n                    }\r\n                    this.seatLocations[this.movingSeatIndex] = {\r\n                        x: x,\r\n                        y: y\r\n                    };\r\n\r\n                    this.drawCanvas();\r\n\r\n                }\r\n\r\n            },\r\n            onKeyup(e) {\r\n\r\n                const key = e.key;\r\n\r\n                if(key === 'Shift') {\r\n\r\n                    this.isShiftKeyDown = false;\r\n\r\n                }\r\n\r\n            }\r\n        },\r\n        computed: {\r\n            isSeatMoving() {\r\n\r\n                return (this.movingSeatIndex > -1);\r\n\r\n            },\r\n            seatIconLength() {\r\n\r\n                return this.canvas.width * 0.05;\r\n\r\n            },\r\n            currentSeatLocation() {\r\n\r\n                return this.seatLocations[this.movingSeatIndex]\r\n\r\n            }\r\n        },\r\n        mounted() {\r\n\r\n            this.canvas = document.querySelector('#canvas');\r\n            this.context = this.canvas.getContext('2d');\r\n            document.onkeydown = this.onKeydown;\r\n            document.onkeyup = this.onKeyup;\r\n\r\n            \/\/ \u521d\u671f\u8868\u793a\u3059\u308b\u5e2d\uff08\u672c\u6765\u306fDB\u306a\u3069\u304b\u3089\u7528\u610f\u3059\u308b\uff09\r\n            this.seatLocations = [\r\n                { x: 74, y: 246 },\r\n                { x: 162, y: 246 },\r\n                { x: 263, y: 246 },\r\n            ];\r\n            this.drawCanvas();\r\n\r\n        }\r\n    }).mount('#app');\r\n\r\n<\/script>\r\n<\/body>\r\n<\/html><\/strong><\/pre>\n
\u4eca\u56de\u306f\u300cxy\u5ea7\u6a19\u300d\u3092\u4f7f\u3063\u3066\u3044\u308b\u306e\u3067\u5c11\u3057\u8907\u96d1\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u306e\u3067\u3001\u4e00\u3064\u305a\u3064\u3054\u7d39\u4ecb\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n
drawCanvas()<\/h2>\n
\u3053\u3053\u3067\u306f\u3001\u5e2d\u3092\u8868\u793a\u3059\u308b\u5ea7\u6a19\u30c7\u30fc\u30bfseatLocations<\/code>\u306e\u5ea7\u6a19\uff08x, y\uff09\u3092\u30eb\u30fc\u30d7\u3067\u3072\u3068\u3064\u305a\u3064\u53d6\u308a\u51fa\u3057\u3001\u305d\u306e\u4f4d\u7f6e\u306b\u5e2d\u306e\u30a2\u30a4\u30b3\u30f3\u3092\u63cf\u753b\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
\u3061\u306a\u307f\u306bCanvas\u306b\u753b\u50cf\u3092\u63cf\u753b\u3059\u308b\u306b\u306f\u3001drawImage()\u3068\u3044\u3046\u30e1\u30bd\u30c3\u30c9\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u304c\u3001\u3053\u308c\u306f\u5c11\u3057\u30af\u30bb\u304c\u3042\u3063\u3066\u3001\u4f4d\u7f6e\u60c5\u5831\u3068URL\u3092\u30bb\u30c3\u30c8\u3059\u308c\u3070\u3044\u3044\u3068\u3044\u3046\u308f\u3051\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/strong><\/p>\n
\u3084\u308a\u304b\u305f\u3068\u3057\u3066\u306f\u3001\u4ee5\u4e0b\u306e\u6d41\u308c\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
    \n
  1. new Image() \u3067\u753b\u50cf\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u3064\u304f\u308b<\/li>\n
  2. \u753b\u50cf\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306b\u300c\u753b\u50cf\u3092\u8aad\u307f\u8fbc\u3093\u3060\u3068\u304d\u300d\u306e\u30a4\u30d9\u30f3\u30c8\u3092\u30bb\u30c3\u30c8<\/li>\n
  3. \u753b\u50cf\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306b\u753b\u50cf\u306eURL\u3092\u30bb\u30c3\u30c8<\/li>\n
  4. \u3059\u308b\u3068\u3001\uff12\u756a\u3067\u30bb\u30c3\u30c8\u3057\u305f\u30a4\u30d9\u30f3\u30c8\u304c\u8d77\u52d5<\/li>\n
  5. \u3053\u3053\u3067\u3084\u3063\u3068 drawImage() \u3092\u8aad\u3093\u3067\u63cf\u753b\u3059\u308b<\/li>\n<\/ol>\n
    \u307e\u305f\u3001\u79fb\u52d5\u4e2d\u306e\u5e2d\u304c\u3069\u308c\u306a\u306e\u304b\u3092\u308f\u304b\u308a\u3084\u3059\u304f\u3059\u308b\u305f\u3081\u3001\u8d64\u67a0\u3067\u56f2\u3080\u3088\u3046\u306b\u3057\u3066\u3044\u308b\u306e\u304c\u3001\u5f8c\u534a\u90e8\u5206\u3067\u3059\u3002<\/p>\n
    \uff08\u30a4\u30e1\u30fc\u30b8\u306f\u3053\u3093\u306a\u611f\u3058\u3067\u3059\u3002\uff09<\/p>\n
    \"\"<\/p>\n
    \u3053\u3053\u3067\u306f\u3001Canvas<\/code>\u306erect()<\/code>\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u3063\u3066\u56db\u89d2\u3092\u63cf\u753b\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u4f59\u767d\u3092\u5c11\u3057\u3064\u3051\u305f\u3044\u306e\u3067\u3001\u5c11\u3057\u3060\u3051\u63cf\u753b\u3059\u308b\u4f4d\u7f6e\u3092\u8abf\u6574\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
    onCanvasClick()<\/h2>\n
    Canvas<\/code>\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u3068\u304d\u306b\u5b9f\u884c\u3055\u308c\u308b\u90e8\u5206\u3067\u3059\u3002<\/p>\n
    \u3053\u306e\u4e2d\u3067\u306f\u3001\u4ee5\u4e0b\uff12\u3064\u306e\u30d1\u30bf\u30fc\u30f3\u306b\u5927\u304d\u304f\u5206\u304b\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n