{"id":1482,"date":"2012-02-12T22:47:04","date_gmt":"2012-02-12T13:47:04","guid":{"rendered":"http:\/\/www.lancard.com\/blog\/?p=1482"},"modified":"2025-03-12T11:30:34","modified_gmt":"2025-03-12T02:30:34","slug":"%e3%80%8e%e3%81%98%e3%82%83%e3%81%b0%e3%81%99%e3%81%8f%e8%a3%bd%e4%bd%9c%e6%89%80%ef%bc%88%e4%bb%ae%ef%bc%89%e3%81%b5%e3%81%9f%e3%81%a4%e3%82%81%e3%80%82%e3%80%8f%e3%81%84%e3%81%a3%e3%81%a6%e3%81%8d","status":"publish","type":"post","link":"https:\/\/www.lancard.com\/blog\/2012\/02\/12\/%e3%80%8e%e3%81%98%e3%82%83%e3%81%b0%e3%81%99%e3%81%8f%e8%a3%bd%e4%bd%9c%e6%89%80%ef%bc%88%e4%bb%ae%ef%bc%89%e3%81%b5%e3%81%9f%e3%81%a4%e3%82%81%e3%80%82%e3%80%8f%e3%81%84%e3%81%a3%e3%81%a6%e3%81%8d\/","title":{"rendered":"\u300e\u3058\u3083\u3070\u3059\u304f\u88fd\u4f5c\u6240\uff08\u4eee\uff09\u3075\u305f\u3064\u3081\u3002\u300f\u3044\u3063\u3066\u304d\u307e\u3057\u305f"},"content":{"rendered":"<p>\u305f\u306e\u3057\u304fJavaScript\u52c9\u5f37\u3057\u3066\u304d\u307e\u3057\u305f\u3002\u4e3b\u50ac\u8005\u30ec\u30dd\u30fc\u30c8\u306f\u3053\u3061\u3089\u3002<\/p>\n<p>\u300e<a href=\"http:\/\/reiare.net\/blog\/2012\/02\/12\/javascript-workshop-2-vol1\/\" target=\"_blank\">\u4f8b\u306e\u3042\u308c\uff08\u4eee\u984c\uff09- \u3058\u3083\u3070\u3059\u304f\u88fd\u4f5c\u6240\uff08\u4eee\uff09\u3075\u305f\u3064\u3081\u3002\u3092\u3053\u306e\u969b\u306a\u306e\u3067\u3084\u308a\u307e\u3057\u305f\u3002<\/a>\u300f<\/p>\n<p>\u914d\u5e03\u30d5\u30a1\u30a4\u30eb\u3084\u30ac\u30a4\u30c9\u30d6\u30c3\u30af\u3082\u7528\u610f\u3055\u308c\u3066\u308b\u306e\u3067\u81ea\u7fd2\u3082\u3067\u304d\u307e\u3059\u3001Canvas\u3092\u7528\u3044\u3066\u63cf\u753b\u3059\u308b\u30a2\u30ca\u30ed\u30b0\u6642\u8a08\u4f5c\u308a\u3002<\/p>\n<p>\u79c1\u3001\u4e00\u5fdc\u6642\u9593\u5185\u306b\u52d5\u304b\u305b\u305f\u3093\u3067\u3059\u304c\u3001Chrome\u3067\u52d5\u304b\u3059\u3068\u753b\u9762\u306b\u53ce\u307e\u3089\u306a\u3044\u3068\u3044\u3046\u4e0d\u5177\u5408\u304c\u3042\u308a\u307e\u3057\u3066\u3001\u5e30\u3063\u3066\u304b\u3089\u8abf\u3079\u305f\u3089\u30e1\u30bd\u30c3\u30c9\u547c\u3073\u51fa\u3057\u306b()\u3092\u4ed8\u3051\u5fd8\u308c\u3066\u3044\u308b\u3068\u3044\u3046\u5f53\u65e5\u306b\u4f55\u5ea6\u3082\u7e70\u308a\u8fd4\u3057\u305f\u30df\u30b9\u304c\u6b8b\u3063\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\n<p>width\u3068\u304bheight\u3063\u3066\u540d\u524d\u3060\u3068\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u601d\u3063\u3061\u3083\u3046\u3093\u3060\u3002<\/p>\n<p>\u3064\u3044\u3067\u306b\u540c\u3058\u3088\u3046\u306a\u51e6\u7406\u3092\u95a2\u6570\u306b\u5c11\u3057\u307e\u3068\u3081\u305f\u308a\u3057\u305f\u6751\u90e8\u7248\u306f\u3053\u3093\u306a\u611f\u3058\u3002<\/p>\n<pre lang=\"javascript\">\r\nfunction SampleClock() {\r\n    try {\r\n        this.board = document.getElementById('board');\r\n        this.canvas = document.getElementById('time');\r\n        this.boardContext = this.board.getContext('2d');\r\n        this.context = this.canvas.getContext('2d');\r\n        this.board.width = this.canvas.width = window.innerWidth;\r\n        this.board.height = this.canvas.height = window.innerHeight;\r\n        this.boardContext.translate(this.width() \/ 2, this.height() \/ 2);\r\n        this.context.translate(this.width() \/ 2, this.height() \/ 2);\r\n        this.context.rotate(this.toRad(-90));\r\n\r\n        this.draw_board();\r\n    } catch (e) {\r\n        alert('initialize error...');\r\n    }\r\n}\r\nSampleClock.prototype = {\r\n    width: function () {\r\n            return this.board.width;\r\n    },\r\n    height: function () {\r\n        return this.board.height;\r\n    },\r\n    radius: function () {\r\n        if(this.width() > this.height()) {\r\n            return this.height() \/ 2;\r\n        } else {\r\n            return this.width() \/ 2;\r\n        }\r\n    },\r\n    \r\n    toRad: function (angle) {\r\n       return angle * (Math.PI \/ 180); \r\n    },\r\n    hourRad: function (datetime) {\r\n        var hour = datetime.getHours();\r\n        var minute = datetime.getMinutes();\r\n        var hour_for_disp = hour;\r\n        if(hour > 12) {\r\n            hour_for_disp = hour - 12;\r\n        }\r\n        return hour_for_disp * Math.PI \/ 6 + minute * Math.PI \/ 360;\r\n    },\r\n    minuteRad: function (datetime) {\r\n        var minute = datetime.getMinutes();\r\n        var second = datetime.getSeconds();\r\n        return minute * Math.PI \/ 30 + second * Math.PI \/ 1800;\r\n    },\r\n    secondRad: function (datetime) {\r\n        var second = datetime.getSeconds();\r\n        var millisecond = datetime.getMilliseconds();\r\n        return second * Math.PI \/ 30 + millisecond * Math.PI \/ 30000;\r\n    },\r\n\r\n    draw_time: function () {\r\n        this.context.clearRect(-this.width() \/ 2, -this.height() \/ 2, this.width(), this.height());\r\n        var now = new Date();\r\n        var draw_line_for_time = function(context, rad, lineWidth, lineLength, lineColor) {\r\n            context.save();\r\n            context.beginPath();\r\n            context.lineWidth = lineWidth;\r\n            context.rotate(rad);\r\n            context.moveTo(0, 0);\r\n            context.lineTo(lineLength, 0);\r\n            context.strokeStyle = lineColor;\r\n            context.stroke();\r\n            context.restore();\r\n        }\r\n        draw_line_for_time(\r\n            this.context,\r\n            this.hourRad(now),\r\n            this.radius() * 0.08,\r\n            this.radius() * 0.6,\r\n            '#000000'\r\n        );\r\n        draw_line_for_time(\r\n            this.context,\r\n            this.minuteRad(now),\r\n            this.radius() * 0.06,\r\n            this.radius() * 0.8,\r\n            '#000000'\r\n        );\r\n        draw_line_for_time(\r\n            this.context,\r\n            this.secondRad(now),\r\n            this.radius() * 0.03,\r\n            this.radius() * 0.8,\r\n            '#ff0000'\r\n        );\r\n\r\n    },\r\n    draw_board: function () {\r\n        this.boardContext.beginPath();\r\n        this.boardContext.lineWidth = this.radius() * 0.05;\r\n        this.boardContext.arc(0, 0, this.radius() * 0.9, 0, Math.PI * 2);\r\n        this.boardContext.stroke();\r\n\r\n        this.boardContext.beginPath();\r\n        this.boardContext.lineWidth = this.radius() * 0.1;\r\n        this.boardContext.arc(0, 0, this.radius() * 0.05, 0, Math.PI * 2);\r\n        this.boardContext.stroke();\r\n\r\n        this.boardContext.beginPath();\r\n        this.boardContext.lineWidth = this.radius() * 0.03;\r\n        for (var i = 0; i < 12; i++) {\r\n            this.boardContext.moveTo(this.radius() * 0.85, 0);\r\n            this.boardContext.lineTo(this.radius() * 0.75, 0);\r\n            this.boardContext.rotate(this.toRad(360 \/ 12));\r\n        }\r\n        this.boardContext.stroke();\r\n\r\n        this.boardContext.beginPath();\r\n        this.boardContext.lineWidth = this.radius() * 0.03;\r\n        for (var i = 0; i < 60; i++) {\r\n            this.boardContext.moveTo(this.radius() * 0.85, 0);\r\n            this.boardContext.lineTo(this.radius() * 0.80, 0);\r\n            this.boardContext.rotate(this.toRad(360 \/ 60));\r\n        }\r\n        this.boardContext.stroke();\r\n    }\r\n};\r\n\r\nvar clock = new SampleClock();\r\nvar timer;\r\n\r\nfunction tik() {\r\n    clock.draw_time();\r\n    timer = setTimeout('tik()', 1000 \/ 60);\r\n}\r\n\r\nfunction tok() {\r\n    clearInterval(timer);\r\n}\r\n\r\ntik();\r\n<\/pre>\n<a class=\"synved-social-button synved-social-button-share synved-social-size-24 synved-social-resolution-single synved-social-provider-facebook nolightbox\" data-provider=\"facebook\" target=\"_blank\" rel=\"nofollow\" title=\"Share on Facebook\" href=\"https:\/\/www.facebook.com\/sharer.php?u=https%3A%2F%2Fwww.lancard.com%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F1482&#038;t=%E3%80%8E%E3%81%98%E3%82%83%E3%81%B0%E3%81%99%E3%81%8F%E8%A3%BD%E4%BD%9C%E6%89%80%EF%BC%88%E4%BB%AE%EF%BC%89%E3%81%B5%E3%81%9F%E3%81%A4%E3%82%81%E3%80%82%E3%80%8F%E3%81%84%E3%81%A3%E3%81%A6%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F&#038;s=100&#038;p&#091;url&#093;=https%3A%2F%2Fwww.lancard.com%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F1482&#038;p&#091;images&#093;&#091;0&#093;=&#038;p&#091;title&#093;=%E3%80%8E%E3%81%98%E3%82%83%E3%81%B0%E3%81%99%E3%81%8F%E8%A3%BD%E4%BD%9C%E6%89%80%EF%BC%88%E4%BB%AE%EF%BC%89%E3%81%B5%E3%81%9F%E3%81%A4%E3%82%81%E3%80%82%E3%80%8F%E3%81%84%E3%81%A3%E3%81%A6%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F\" style=\"font-size: 0px;width:24px;height:24px;margin:0;margin-bottom:5px;margin-right:5px\"><img loading=\"lazy\" decoding=\"async\" alt=\"Facebook\" title=\"Share on Facebook\" class=\"synved-share-image synved-social-image synved-social-image-share\" width=\"24\" height=\"24\" style=\"display: inline;width:24px;height:24px;margin: 0;padding: 0;border: none;box-shadow: none\" src=\"https:\/\/www.lancard.com\/blog\/wp-content\/plugins\/social-media-feather\/synved-social\/image\/social\/regular\/48x48\/facebook.png\" \/><\/a><a class=\"synved-social-button synved-social-button-share synved-social-size-24 synved-social-resolution-single synved-social-provider-twitter nolightbox\" data-provider=\"twitter\" target=\"_blank\" rel=\"nofollow\" title=\"Share on Twitter\" href=\"http:\/\/twitter.com\/share?url=https%3A%2F%2Fwww.lancard.com%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F1482&#038;text=%E3%80%8E%E3%81%98%E3%82%83%E3%81%B0%E3%81%99%E3%81%8F%E8%A3%BD%E4%BD%9C%E6%89%80%EF%BC%88%E4%BB%AE%EF%BC%89%E3%81%B5%E3%81%9F%E3%81%A4%E3%82%81%E3%80%82%E3%80%8F%E3%81%84%E3%81%A3%E3%81%A6%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F\" style=\"font-size: 0px;width:24px;height:24px;margin:0;margin-bottom:5px;margin-right:5px\"><img loading=\"lazy\" decoding=\"async\" alt=\"twitter\" title=\"Share on Twitter\" class=\"synved-share-image synved-social-image synved-social-image-share\" width=\"24\" height=\"24\" style=\"display: inline;width:24px;height:24px;margin: 0;padding: 0;border: none;box-shadow: none\" src=\"https:\/\/www.lancard.com\/blog\/wp-content\/plugins\/social-media-feather\/synved-social\/image\/social\/regular\/48x48\/twitter.png\" \/><\/a><a class=\"synved-social-button synved-social-button-share synved-social-size-24 synved-social-resolution-single synved-social-provider-linkedin nolightbox\" data-provider=\"linkedin\" target=\"_blank\" rel=\"nofollow\" title=\"Share on Linkedin\" href=\"https:\/\/www.linkedin.com\/shareArticle?mini=true&#038;url=https%3A%2F%2Fwww.lancard.com%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F1482&#038;title=%E3%80%8E%E3%81%98%E3%82%83%E3%81%B0%E3%81%99%E3%81%8F%E8%A3%BD%E4%BD%9C%E6%89%80%EF%BC%88%E4%BB%AE%EF%BC%89%E3%81%B5%E3%81%9F%E3%81%A4%E3%82%81%E3%80%82%E3%80%8F%E3%81%84%E3%81%A3%E3%81%A6%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F\" style=\"font-size: 0px;width:24px;height:24px;margin:0;margin-bottom:5px;margin-right:5px\"><img loading=\"lazy\" decoding=\"async\" alt=\"linkedin\" title=\"Share on Linkedin\" class=\"synved-share-image synved-social-image synved-social-image-share\" width=\"24\" height=\"24\" style=\"display: inline;width:24px;height:24px;margin: 0;padding: 0;border: none;box-shadow: none\" src=\"https:\/\/www.lancard.com\/blog\/wp-content\/plugins\/social-media-feather\/synved-social\/image\/social\/regular\/48x48\/linkedin.png\" \/><\/a><a class=\"synved-social-button synved-social-button-share synved-social-size-24 synved-social-resolution-single synved-social-provider-tumblr nolightbox\" data-provider=\"tumblr\" target=\"_blank\" rel=\"nofollow\" title=\"Share on tumblr\" href=\"https:\/\/tumblr.com\/share?s=&#038;v=3&#038;t=%E3%80%8E%E3%81%98%E3%82%83%E3%81%B0%E3%81%99%E3%81%8F%E8%A3%BD%E4%BD%9C%E6%89%80%EF%BC%88%E4%BB%AE%EF%BC%89%E3%81%B5%E3%81%9F%E3%81%A4%E3%82%81%E3%80%82%E3%80%8F%E3%81%84%E3%81%A3%E3%81%A6%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F&#038;u=https%3A%2F%2Fwww.lancard.com%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F1482\" style=\"font-size: 0px;width:24px;height:24px;margin:0;margin-bottom:5px;margin-right:5px\"><img loading=\"lazy\" decoding=\"async\" alt=\"tumblr\" title=\"Share on tumblr\" class=\"synved-share-image synved-social-image synved-social-image-share\" width=\"24\" height=\"24\" style=\"display: inline;width:24px;height:24px;margin: 0;padding: 0;border: none;box-shadow: none\" src=\"https:\/\/www.lancard.com\/blog\/wp-content\/plugins\/social-media-feather\/synved-social\/image\/social\/regular\/48x48\/tumblr.png\" \/><\/a><a class=\"synved-social-button synved-social-button-share synved-social-size-24 synved-social-resolution-single synved-social-provider-mail nolightbox\" data-provider=\"mail\" rel=\"nofollow\" title=\"Share by email\" href=\"mailto:?subject=%E3%80%8E%E3%81%98%E3%82%83%E3%81%B0%E3%81%99%E3%81%8F%E8%A3%BD%E4%BD%9C%E6%89%80%EF%BC%88%E4%BB%AE%EF%BC%89%E3%81%B5%E3%81%9F%E3%81%A4%E3%82%81%E3%80%82%E3%80%8F%E3%81%84%E3%81%A3%E3%81%A6%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F&#038;body=%E3%82%B7%E3%82%A7%E3%82%A2%E3%81%99%E3%82%8B%EF%BC%9A:%20https%3A%2F%2Fwww.lancard.com%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F1482\" style=\"font-size: 0px;width:24px;height:24px;margin:0;margin-bottom:5px\"><img loading=\"lazy\" decoding=\"async\" alt=\"mail\" title=\"Share by email\" class=\"synved-share-image synved-social-image synved-social-image-share\" width=\"24\" height=\"24\" style=\"display: inline;width:24px;height:24px;margin: 0;padding: 0;border: none;box-shadow: none\" src=\"https:\/\/www.lancard.com\/blog\/wp-content\/plugins\/social-media-feather\/synved-social\/image\/social\/regular\/48x48\/mail.png\" \/><\/a>","protected":false},"excerpt":{"rendered":"<p>\u305f\u306e\u3057\u304fJavaScript\u52c9\u5f37\u3057\u3066\u304d\u307e\u3057\u305f\u3002\u4e3b\u50ac\u8005\u30ec\u30dd\u30fc\u30c8\u306f\u3053\u3061\u3089\u3002 \u300e\u4f8b\u306e\u3042\u308c\uff08\u4eee\u984c\uff09- \u3058\u3083\u3070\u3059\u304f\u88fd\u4f5c\u6240\uff08\u4eee\uff09\u3075\u305f\u3064\u3081\u3002\u3092\u3053\u306e\u969b\u306a\u306e\u3067\u3084\u308a\u307e\u3057\u305f\u3002\u300f \u914d\u5e03\u30d5\u30a1\u30a4\u30eb\u3084\u30ac\u30a4\u30c9\u30d6\u30c3\u30af\u3082\u7528\u610f\u3055\u308c\u3066\u308b\u306e\u3067\u81ea\u7fd2\u3082\u3067\u304d\u307e\u3059\u3001Ca [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36],"tags":[70,40],"class_list":["post-1482","post","type-post","status-publish","format-standard","hentry","category-web","tag-javascript","tag-40"],"_links":{"self":[{"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/posts\/1482","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/comments?post=1482"}],"version-history":[{"count":6,"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/posts\/1482\/revisions"}],"predecessor-version":[{"id":1488,"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/posts\/1482\/revisions\/1488"}],"wp:attachment":[{"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/media?parent=1482"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/categories?post=1482"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lancard.com\/blog\/wp-json\/wp\/v2\/tags?post=1482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}