{"id":361,"date":"2020-07-27T09:05:34","date_gmt":"2020-07-27T00:05:34","guid":{"rendered":"https:\/\/blog.wsd.sh\/?p=361"},"modified":"2020-07-27T09:05:34","modified_gmt":"2020-07-27T00:05:34","slug":"13-14-javascript-%e5%a4%89%e6%9b%b4","status":"publish","type":"post","link":"https:\/\/blog.wsd.sh\/?p=361","title":{"rendered":"13->14 JavaScript \u5909\u66f4"},"content":{"rendered":"<p>method\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210<br \/>\n\u30fb\u30d5\u30a1\u30f3\u30af\u30b7\u30e7\u30f3\u3092\u30b0\u30eb\u30fc\u30d4\u30f3\u30b0<\/p>\n<p>1.1 \/\/ \u30d5\u30a1\u30f3\u30af\u30b7\u30e7\u30f3\u3092\u30b0\u30eb\u30fc\u30d4\u30f3\u30b0<br \/>\nbrfore:<\/p>\n<pre>\r\n    \/\/ \u8272\u306e\u5909\u66f4\r\n        function _data_color() {\r\n                let cnvColor = this.getAttribute( \"data-color\" ) ;\r\n                console.log(\"cnvColor =\"+cnvColor );\r\n\r\n                root.setCnvColor(cnvColor);\r\n        }\r\n\r\n    \/\/ \u7dda\u306e\u592a\u3055\u5909\u66f4\r\n        function _data_bold() {\r\n                let cnvBold = this.getAttribute( \"data-bold\" ) ;\r\n                console.log(\"cnvBold =\"+cnvBold );\r\n\r\n                root.setCnvBold(cnvBold);\r\n        }\r\n\r\n\r\n    \/\/ \u63cf\u753b\u30af\u30ea\u30a2\r\n        function _clear(){\r\n                root.ctx.clearRect(0, 0, root.cnvWidth, root.cnvHeight);\r\n                root.setBgColor(root.bgColor);\r\n        }\r\n\r\n    \/\/ canvas\u3092\u753b\u50cf\u3067\u4fdd\u5b58\r\n        function _download(){\r\n                var base64 = root.canvas.toDataURL(\"image\/jpeg\");\r\n                document.getElementById(\"download\").href = base64;\r\n        }\r\n<\/pre>\n<p>after:<\/p>\n<pre>\r\n        var method = {\r\n                data_color : function () {\r\n                        let cnvColor = this.getAttribute( \"data-color\" ) ;\r\n                        console.log(\"cnvColor =\"+cnvColor );\r\n\r\n                        root.setCnvColor(cnvColor);\r\n                },\r\n\r\n                data_bold : function () {\r\n                        let cnvBold = this.getAttribute( \"data-bold\" ) ;\r\n                        console.log(\"cnvBold =\"+cnvBold );\r\n\r\n                        root.setCnvBold(cnvBold);\r\n                },\r\n\r\n                clear : function (){\r\n                        root.ctx.clearRect(0, 0, root.cnvWidth, root.cnvHeight);\r\n                        root.setBgColor(root.bgColor);\r\n                },\r\n\r\n                download : function (){\r\n                        var base64 = root.canvas.toDataURL(\"image\/jpeg\");\r\n                        document.getElementById(\"download\").href = base64;\r\n                }\r\n        }\r\n<\/pre>\n<p>1.2 \u8272\u306e\u5909\u66f4<br \/>\n\u547c\u3073\u51fa\u3057\u306e\u5909\u66f4<br \/>\nbrfore:<\/p>\n<pre>\r\n                        c_elms[j].addEventListener(\"click\" , _data_color, false);\r\n<\/pre>\n<p>after:<\/p>\n<pre>\r\n                        c_elms[j].addEventListener(\"click\" , method.data_color, false);\r\n<\/pre>\n<p>1.3 \u7dda\u306e\u592a\u3055\u5909\u66f4<br \/>\n\u547c\u3073\u51fa\u3057\u306e\u5909\u66f4<br \/>\nbrfore:<\/p>\n<pre>\r\n                        b_elms[j].addEventListener(\"click\" , _data_bold, false);\r\n<\/pre>\n<p>after:<\/p>\n<pre>\r\n                        b_elms[j].addEventListener(\"click\" , method.data_bold, false);\r\n<\/pre>\n<p>1.3 \u63cf\u753b\u30af\u30ea\u30a2<br \/>\n\u547c\u3073\u51fa\u3057\u306e\u5909\u66f4<br \/>\nbrfore:<\/p>\n<pre>\r\n        clear.addEventListener(\"click\" , _clear, false);\r\n<\/pre>\n<p>after:<\/p>\n<pre>\r\n        clear.addEventListener(\"click\" , method.clear, false);\r\n<\/pre>\n<p>1.4 canvas\u3092\u753b\u50cf\u3067\u4fdd\u5b58<br \/>\n\u547c\u3073\u51fa\u3057\u306e\u5909\u66f4<br \/>\nbrfore:<\/p>\n<pre>\r\n        download.addEventListener(\"click\" , _download, false);\r\n<\/pre>\n<p>after:<\/p>\n<pre>\r\n        download.addEventListener(\"click\" , method.download, false);\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>method\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210 \u30fb\u30d5\u30a1\u30f3\u30af\u30b7\u30e7\u30f3\u3092\u30b0\u30eb\u30fc\u30d4\u30f3\u30b0 1.1 \/\/ \u30d5\u30a1\u30f3\u30af\u30b7\u30e7\u30f3\u3092\u30b0\u30eb\u30fc\u30d4\u30f3\u30b0 brfore: \/\/ \u8272\u306e\u5909\u66f4 function _data_color() { let cnvColor = &#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/361"}],"collection":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=361"}],"version-history":[{"count":1,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/361\/revisions"}],"predecessor-version":[{"id":362,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/361\/revisions\/362"}],"wp:attachment":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}