{"id":2686,"date":"2023-04-25T10:01:42","date_gmt":"2023-04-25T01:01:42","guid":{"rendered":"https:\/\/sirius10.net\/blog\/wordpress\/?p=2686"},"modified":"2023-04-25T10:01:44","modified_gmt":"2023-04-25T01:01:44","slug":"post-2686","status":"publish","type":"post","link":"https:\/\/sirius10.net\/blog\/wordpress\/index.php\/2023\/04\/25\/2686\/","title":{"rendered":"Javascript \u3067\u30d7\u30ed\u30b0\u30ec\u30b9\u30d0\u30fc\u3092\u4f5c\u308b"},"content":{"rendered":"\n

\u3000web \u30da\u30fc\u30b8\u4e0a\u306b\u9032\u884c\u72b6\u6cc1\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306b\u30d7\u30ed\u30b0\u30ec\u30b9\u30d0\u30fc\u3092\u4f5c\u308a\u305f\u304f\u306a\u308a\u307e\u3057\u305f\u3002Canvas \u3092\u4f7f\u3048\u3070 javascript \u3067\u4f5c\u308c\u308b\u3068\u8003\u3048\u307e\u3057\u305f\u3002<\/p>\n\n\n\n

\u3000Canvas \u306f\u4f7f\u3063\u305f\u3053\u3068\u304c\u3042\u308b\u306e\u3067\u3059\u304c\u3001\u30d7\u30ed\u30b0\u30ec\u30b9\u30d0\u30fc\u306e\u30b5\u30a4\u30ba\u3092\u53ef\u5909\u306b\u3057\u305f\u3044\u3068\u601d\u3063\u305f\u3068\u3053\u308d\u3001canvas \u30bf\u30b0\u3067\u306f\u53ef\u5909\u306b\u3067\u304d\u306a\u3044\u3053\u3068\u304c\u308f\u304b\u308a\u307e\u3057\u305f\u3002css \u3068\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u53ef\u5909\u306b\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n

\u3000Canvas \u3067\u30d7\u30ed\u30b0\u30ec\u30b9\u30d0\u30fc\u3092\u5b9f\u88c5\u3057\u305f\u5f8c\u3001\u8abf\u3079\u3066\u307f\u308c\u3070\u3001progress \u30bf\u30b0\u3067\u5b9f\u73fe\u3067\u304d\u308b\u3053\u3068\u304c\u308f\u304b\u308a\u307e\u3057\u305f\u3002\u3053\u3061\u3089\u306e\u65b9\u304c\u7c21\u5358\u3067\u3059\u3002<\/p>\n\n\n\n

Canvas<\/h2>\n\n\n\n

\u3000canvas \u30bf\u30b0\u3067\u6307\u5b9a\u3057\u305f\u30b5\u30a4\u30ba\u306f\u3001\u63cf\u753b\u9818\u57df\u306e\u4eee\u60f3\u7684\u306a\u30b5\u30a4\u30ba\u306e\u3088\u3046\u3067\u3059\u3002css \u3067\u30b5\u30a4\u30ba\u306e\u6307\u5b9a\u3092\u3057\u306a\u3044\u5834\u5408\u306f\u3001\u3053\u306e\u4eee\u60f3\u7684\u306a\u30b5\u30a4\u30ba\u3068\u8868\u793a\u4e0a\u306e\u30b5\u30a4\u30ba\u306f\u540c\u3058\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n

\u3000\u3068\u3053\u308d\u304c\u3001css \u3067\u30b5\u30a4\u30ba\u3092\u6307\u5b9a\u3059\u308b\u3068\u3001\u8868\u793a\u4e0a\u306e\u30b5\u30a4\u30ba\u3068\u63cf\u753b\u9818\u57df\u306e\u4eee\u60f3\u7684\u306a\u30b5\u30a4\u30ba\u306b\u9055\u3044\u304c\u51fa\u307e\u3059\u3002Javascript \u3067 canvas \u306b\u63cf\u753b\u3059\u308b\u969b\u306b\u306f\u3001\u63cf\u753b\u9818\u57df\u306e\u4eee\u60f3\u7684\u306a\u30b5\u30a4\u30ba\u3092\u3082\u3068\u306b\u63cf\u753b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

\u3000\u306a\u305c css \u3067\u30b5\u30a4\u30ba\u3092\u6307\u5b9a\u3057\u3088\u3046\u3068\u3057\u305f\u306e\u304b\u3068\u3044\u3048\u3070\u3001\u901a\u5e38\u306e\u8981\u7d20\u306e\u30b5\u30a4\u30ba\u6307\u5b9a\u306f css \u3067\u3059\u3079\u304d\u3060\u3068\u8003\u3048\u3066\u3044\u308b\u304b\u3089\u3067\u3059\u3002html \u306e\u30bf\u30b0\u3067\u306f\u6587\u7ae0\u306e\u69cb\u9020\u3092\u793a\u3057\u3001\u30b5\u30a4\u30ba\u3084\u8272\u306a\u3069\u306e\u898b\u305f\u76ee\u306f css \u3067\u6574\u3048\u308b\u3068\u5b66\u3073\u307e\u3057\u305f\u3002<\/p>\n\n\n\n

\u3000\u307e\u305f\u3001Canvas \u30bf\u30b0\u3067\u6307\u5b9a\u3059\u308b\u30b5\u30a4\u30ba\u306b\u53ef\u5909\u30b5\u30a4\u30ba\u306f\u6307\u5b9a\u3067\u304d\u307e\u305b\u3093\u3002\u4f8b\u3048\u3070\u3001css \u3067\u5e45\u3092 100% \u306b\u3057\u305f\u5834\u5408\u306f\u3001\u30a6\u30a3\u30f3\u30c9\u30a6\u30b5\u30a4\u30ba\u306b\u3088\u3063\u3066\u4f38\u3073\u7e2e\u307f\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

\u4ee5\u4e0b\u306e\u3088\u3046\u306a css \u3068 html \u306e\u5834\u5408\u3092\u8a66\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n\n\n\n

Canvas \u306e\u30b5\u30a4\u30ba<\/h3>\n\n\n\n

css<\/h4>\n\n\n\n
    .drawarea {\n        border: 1px solid #040;\n        color: #0ff;\n        background-color: #0f0;\n    }\n    #drawarea1 {\n    }\n    #drawarea2 {\n    }\n    #drawarea3 {\n        width: 200px;\n        height: 10px;\n    }\n    #drawarea4 {\n        width: 100%;\n        height: 10px;\n    }<\/code><\/pre>\n\n\n\n
html<\/h4>\n\n\n\n
    <div>\u30b5\u30a4\u30ba\u6307\u5b9a\u306a\u3057\u3067Canvas \u3092\u4f5c\u6210<\/div>\n    <canvas id=\"drawarea1\" class=\"drawarea\">\u63cf\u753b\u9818\u57df<\/canvas>\n    Canvas \u30b5\u30a4\u30ba\uff1a<span id=\"size1\"><\/span>\n    <div>canvas \u30bf\u30b0\u3067 width \u3068 height \u3092\u6307\u5b9a(200 x 100)<\/div>\n    <canvas id=\"drawarea2\" class=\"drawarea\" width=\"200\" height=\"100\">\u63cf\u753b\u9818\u57df<\/canvas>\n    Canvas \u30b5\u30a4\u30ba\uff1a<span id=\"size2\"><\/span>\n    <div>css \u3067 width \u3068 height \u3092\u6307\u5b9a(200px x 10px)<\/div>\n    <canvas id=\"drawarea3\" class=\"drawarea\">\u63cf\u753b\u9818\u57df<\/canvas>\n    Canvas \u30b5\u30a4\u30ba\uff1a<span id=\"size3\"><\/span>\n    <div>\u30bf\u30b0(200 x 10)\u3068 css(100% x 10px) \u3067 width \u3068 height \u3092\u6307\u5b9a<\/div>\n    <canvas id=\"drawarea4\" width=\"200\" height=\"10\" class=\"drawarea\">\u63cf\u753b\u9818\u57df<\/canvas>\n    Canvas \u30b5\u30a4\u30ba\uff1a<span id=\"size4\"><\/span><\/code><\/pre>\n\n\n\n
javascript<\/h4>\n\n\n\n
    <script>\n        let n = 0;\n        let canvas1 = document.getElementById('drawarea1');\n        let canvas2 = document.getElementById('drawarea2');\n        let canvas3 = document.getElementById('drawarea3');\n        let canvas4 = document.getElementById('drawarea4');\n        document.getElementById('size1').innerHTML = canvas1.width+' x '+canvas1.height;\n        document.getElementById('size2').innerHTML = canvas2.width+' x '+canvas2.height;\n        document.getElementById('size3').innerHTML = canvas3.width+' x '+canvas3.height;\n        document.getElementById('size4').innerHTML = canvas4.width+' x '+canvas4.height;\n    <\/script><\/code><\/pre>\n\n\n\n
\u3000\u3053\u306e\u7d50\u679c\u3001\u6b21\u306e\u3088\u3046\u306b\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
\u30d7\u30ed\u30b0\u30ec\u30b9\u30d0\u30fc<\/h3>\n\n\n\n
\u3000Canvas \u3092\u4f7f\u3063\u305f\u30d7\u30ed\u30b0\u30ec\u30b9\u30d0\u30fc\u306f\u6b21\u306e\u3088\u3046\u306b\u4f5c\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
css<\/h4>\n\n\n\n
    #progressbar {\n        width: 100%;\n        height: 5px;\n        border: 1px solid #040;\n        color: #0ff;\n        background-color: #0f0;\n    }<\/code><\/pre>\n\n\n\n
html<\/h4>\n\n\n\n
    <canvas id=\"progressbar\" width=\"200\" height=\"5\">\u9032\u884c\u72b6\u6cc1<\/canvas><\/code><\/pre>\n\n\n\n
javascript<\/h4>\n\n\n\n
    <script>\n        let n = 0;\n        setInterval(progressbar, 1000);\n        function progressbar() {\n            let canvas = document.getElementById('drawarea5');\n            if( canvas.getContext ) {\n                let ctx = canvas.getContext('2d');\n                ctx.clearRect(0, 0, canvas.width, canvas.height);\n                ctx.fillRect(0, 0, canvas.width*n\/100, canvas.height);\n            }\n            n = (n+1) % 101;\n        }<\/code><\/pre>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
Progress \u30bf\u30b0<\/h2>\n\n\n\n
\u3000progress \u30bf\u30b0\u3092\u4f7f\u3048\u3070\u7c21\u5358\u306b\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
css<\/h3>\n\n\n\n
    #progressbar {\n        width: 100%;\n    }<\/code><\/pre>\n\n\n\n
html<\/h3>\n\n\n\n
    <progress id=\"progressbar\" value=\"0\" max=\"100\">\u30d7\u30ed\u30b0\u30ec\u30b9\u30d0\u30fc<\/progress><\/code><\/pre>\n\n\n\n
javascript<\/h3>\n\n\n\n
    <script>\n        let n = 0;\n        setInterval(progressbar, 1000);\n        function progressbar() {\n            document.getElementById('progressbar').value = n;\n            n = (n+1) % 101;\n        }\n    <\/script><\/code><\/pre>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
\u3000Canvas \u3067\u82e6\u52b4\u3059\u308b\u5fc5\u8981\u306f\u306a\u304b\u3063\u305f\u3088\u3046\u3067\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u3000web \u30da\u30fc\u30b8\u4e0a\u306b\u9032\u884c\u72b6\u6cc1\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306b\u30d7\u30ed\u30b0\u30ec\u30b9\u30d0\u30fc\u3092\u4f5c\u308a\u305f\u304f\u306a\u308a\u307e\u3057\u305f\u3002Canvas \u3092\u4f7f\u3048\u3070 javascript \u3067\u4f5c\u308c\u308b\u3068\u8003\u3048\u307e\u3057\u305f\u3002 \u3000Canvas \u306f\u4f7f\u3063\u305f\u3053\u3068\u304c\u3042\u308b\u306e\u3067\u3059\u304c\u3001\u30d7\u30ed\u30b0\u30ec\u30b9\u30d0\u30fc\u306e\u30b5\u30a4\u30ba\u3092\u53ef […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-2686","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/sirius10.net\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2686","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sirius10.net\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sirius10.net\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sirius10.net\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sirius10.net\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=2686"}],"version-history":[{"count":3,"href":"https:\/\/sirius10.net\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2686\/revisions"}],"predecessor-version":[{"id":2700,"href":"https:\/\/sirius10.net\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2686\/revisions\/2700"}],"wp:attachment":[{"href":"https:\/\/sirius10.net\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=2686"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sirius10.net\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=2686"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sirius10.net\/blog\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=2686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}