{"id":2498,"date":"2016-06-02T10:00:27","date_gmt":"2016-06-02T01:00:27","guid":{"rendered":"http:\/\/sitest.jp\/blog\/?p=2498"},"modified":"2017-01-31T18:38:13","modified_gmt":"2017-01-31T09:38:13","slug":"html5%e3%81%a7%e3%81%ae%e6%8f%8f%e7%94%bb%e3%82%92%e5%ae%9f%e7%8f%be%e3%81%99%e3%82%8bsvg%e3%81%a8canvas%e3%82%92%e6%94%b9%e3%82%81%e3%81%a6%e6%af%94%e8%bc%83%e3%81%99%e3%82%8b","status":"publish","type":"post","link":"https:\/\/sitest.jp\/blog\/?p=2498","title":{"rendered":"HTML5\u3067\u306e\u63cf\u753b\u3092\u5b9f\u73fe\u3059\u308bSVG\u3068Canvas\u3092\u6539\u3081\u3066\u6bd4\u8f03\u3059\u308b"},"content":{"rendered":"<p>\u3053\u3093\u306b\u3061\u306f\u3001SiTest\u4e8b\u696d\u90e8\u30a8\u30f3\u30b8\u30cb\u30a2\u306e\u68ee\u6c38\u3067\u3059\u3002<\/p>\n<p>HTML5\u306b\u304a\u3044\u3066\u63cf\u753b\u3092\u884c\u3046\u65b9\u6cd5\u3068\u3057\u3066\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u3066\u304a\u308a\u3001\u3088\u304f\u4f7f\u308f\u308c\u3066\u3044\u308b\u3082\u306e\u3068\u3057\u3066SVG\u3068Canvas\u304c\u6319\u3052\u3089\u308c\u307e\u3059\u3002\u3053\u308c\u3089\u304c\u6b63\u5f0f\u306b\u30b5\u30dd\u30fc\u30c8\u3055\u308cWeb\u30b5\u30a4\u30c8\u306b\u304a\u3051\u308b\u63cf\u753b\u304c\u884c\u3048\u308b\u3088\u3046\u306b\u306a\u308a\u3001\u5e45\u5e83\u304f\u4f7f\u308f\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<p>HTML5\u306e\u6b63\u5f0f\u52e7\u544a\u524d\u304b\u3089\u4f7f\u7528\u3067\u304d\u308b\u30d6\u30e9\u30a6\u30b6\u3082\u591a\u304b\u3063\u305f\u305f\u3081\u65e2\u306b\u3054\u5b58\u3058\u306e\u65b9\u3082\u591a\u3044\u304b\u3068\u601d\u3044\u307e\u3059\u304c\u3001\u4eca\u56de\u306f\u6539\u3081\u3066SVG\u3068Canvas\u306b\u3064\u3044\u3066\u6bd4\u8f03\u3057\u3066\u307f\u307e\u3059\u3002<br \/>\n<!--more--><\/p>\n<div class=\"frame_headding\">\n<h3 style=\"text-align: left;\">SVG\u3068Canvas\u306e\u9055\u3044<\/h3>\n<\/div>\n<p>SVG\u3068Canvas\u3067\u306f\u63cf\u753b\u306e\u4ed5\u65b9\u3001\u8a18\u8ff0\u306e\u4ed5\u65b9\u304c\u9055\u3044\u307e\u3059\u3002<\/p>\n<h3 style=\"text-align:left\">\u3010SVG\u3011<\/h3>\n<ul style=\"margin:1em\">\n<li style=\"list-style:square inside\">\u30d9\u30af\u30bf\u30fc\u5f62\u5f0f\u3067\u63cf\u753b<\/li>\n<li style=\"list-style:square inside\">\u56f3\u5f62\u4e00\u3064\u4e00\u3064\u304c&lt;svg&gt;\u30bf\u30b0\u306e\u5b50\u8981\u7d20\u3067\u3042\u308bDOM\u8981\u7d20\u3068\u3057\u3066\u8a18\u8f09\u3055\u308c\u308b<\/li>\n<li style=\"list-style:square inside\">\u56f3\u5f62\u306e\u7d44\u307f\u5408\u308f\u305b\u3092\u62e1\u5f35\u5b50&#8221;.svg&#8221;\u306e\u5916\u90e8\u30d5\u30a1\u30a4\u30eb\u3068\u3057\u3066\u6271\u3046\u3053\u3068\u3082\u53ef\u80fd<\/li>\n<li style=\"list-style:square inside\">SVG\u30d5\u30a1\u30a4\u30eb\u306fAdobe Illustrator\u3067\u8aad\u307f\u51fa\u3057\u3001\u4fdd\u5b58\u304c\u53ef\u80fd<\/li>\n<li style=\"list-style:square inside\">\u56f3\u5f62\u304cDOM\u8981\u7d20\u306a\u306e\u3067JavaScript\u3067\u306e\u5909\u5f62\u306a\u3069\u304c\u884c\u3044\u3084\u3059\u3044<\/li>\n<\/ul>\n<h4 style=\"margin-left:1em\">SVG \u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/h4>\n<pre style=\"margin: 0 1em 2em\"><code class=\"html\">&lt;svg width=\"200px\" height=\"200px\"&gt;\n  &lt;rect width=\"100px\" height=\"100px\" fill=\"#0000ff\"\/&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n<h3 style=\"text-align:left\">\u3010Canvas\u3011<\/h3>\n<ul style=\"margin:1em\">\n<li style=\"list-style:square inside\">\u30e9\u30b9\u30bf\u30fc\u5f62\u5f0f(\u30d3\u30c3\u30c8\u30de\u30c3\u30d7\u5f62\u5f0f)\u3067\u63cf\u753b<\/li>\n<li style=\"list-style:square inside\">&lt;canvas&gt;\u8981\u7d20\u3067\u63cf\u753b\u9818\u57df(\u30ad\u30e3\u30f3\u30d0\u30b9)\u3092\u78ba\u4fdd\u3057\u3001JavaScript\u3092\u7528\u3044\u3066\u63cf\u753b\u3059\u308b<\/li>\n<li style=\"list-style:square inside\">\u63cf\u753b\u3057\u305f\u753b\u50cf\u3092\u5225\u5f62\u5f0f(PNG\u306a\u3069)\u3067\u4fdd\u5b58\u3057\u3084\u3059\u3044<\/li>\n<\/ul>\n<h4 style=\"margin-left:1em\">Canvas \u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/h4>\n<h5 style=\"margin:0 0 0 1em\">\u25cfHTML<\/h5>\n<pre style=\"margin: 0 1em\"><code>&lt;canvas id=\"canvas\" width=\"200\" height=\"200\"&gt;&lt;\/canvas&gt;<\/code><\/pre>\n<h5 style=\"margin-left:1em\">\u25cfJavaScript<\/h5>\n<pre style=\"margin: 0 1em 1em\"><code class=\"javascript\">var canvas=document.getElementById(\"canvas\");\ncar context=canvas.getContext(\"2d\");\ncontext.fillStyle=\"rgb(0,0,255)\";\ncontext.fillRect(0,0,100,100);<\/code><\/pre>\n<p>\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u3067\u306fSVG\u3001Canvas\u3044\u305a\u308c\u3082\u5e45\u3001\u9ad8\u3055100px\u306e\u9752\u8272\u306e\u6b63\u65b9\u5f62\u304c\u63cf\u753b\u3055\u308c\u307e\u3059\u3002<\/p>\n<div class=\"frame_headding\">\n<h3 style=\"text-align: left;\">\u3069\u3061\u3089\u3092\u4f7f\u3046\u65b9\u304c\u9069\u3057\u3066\u3044\u308b\u304b<\/h3>\n<\/div>\n<p>\u300cSVG\u3068Canvas\u306e\u3069\u3061\u3089\u3092\u4f7f\u3046\u3079\u304d\u304b\uff1f\u300d\u306b\u3064\u3044\u3066\u306e\u8b70\u8ad6\u306f\u4ee5\u524d\u304b\u3089\u3057\u3070\u3057\u3070\u3055\u308c\u3066\u304a\u308a\u3001\u30cd\u30c3\u30c8\u4e0a\u3067\u3082\u591a\u6570\u306e\u8a18\u4e8b\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u7d50\u5c40\u306e\u3068\u3053\u308d\u3001\u3069\u3061\u3089\u3092\u4f7f\u3046\u3079\u304d\u304b\u306f\u4e00\u6982\u306b\u306f\u8a00\u3048\u305a\u3001SVG\u306e\u65b9\u304c\u9069\u3057\u3066\u3044\u308b\u30b1\u30fc\u30b9\u3001Canvas\u306e\u65b9\u304c\u9069\u3057\u3066\u3044\u308b\u30b1\u30fc\u30b9\u304c\u3042\u308b\u3068\u3044\u3048\u307e\u3059\u3002<\/p>\n<h4>SVG\u306e\u65b9\u304c\u9069\u3057\u3066\u3044\u308b\u30b1\u30fc\u30b9<\/h4>\n<ul style=\"margin:1em\">\n<li style=\"list-style:square inside\">\u5186\u3001\u56db\u89d2\u5f62\u306a\u3069\u306e\u56f3\u5f62\u306e\u7d44\u307f\u5408\u308f\u305b\u3067\u69cb\u6210\u3055\u308c\u3066\u3044\u308b\u30b1\u30fc\u30b9<\/li>\n<li style=\"list-style:square inside\">\u30d9\u30af\u30bf\u30fc\u5f62\u5f0f\u306a\u306e\u3067\u62e1\u5927\u3001\u7e2e\u5c0f\u3067\u56f3\u5f62\u306e\u52a3\u5316\u304c\u5c11\u306a\u3044\u65b9\u304c\u826f\u3044\u30b1\u30fc\u30b9<\/li>\n<li style=\"list-style:square inside\">\u5916\u90e8\u30d5\u30a1\u30a4\u30eb\u3068\u3057\u3066\u53d7\u3051\u6e21\u3057\u3092\u884c\u3044\u3001\u5225\u306eHTML\u4e0a\u3067\u3082\u8868\u793a\u3055\u305b\u305f\u3044\u30b1\u30fc\u30b9<\/li>\n<\/ul>\n<h4>Canvas\u306e\u65b9\u304c\u9069\u3057\u3066\u3044\u308b\u30b1\u30fc\u30b9<\/h4>\n<ul style=\"margin:1em\">\n<li style=\"list-style:square inside\">\u30d3\u30c3\u30c8\u30de\u30c3\u30d7\u5f62\u5f0f\u306a\u306e\u3067\u30d4\u30af\u30bb\u30eb\u5358\u4f4d\u3067\u306e\u7d30\u304b\u3044\u63cf\u753b\u3092\u884c\u3044\u305f\u3044\u30b1\u30fc\u30b9<\/li>\n<li style=\"list-style:square inside\">\u63cf\u753b\u3057\u305f\u753b\u50cf\u3092\u5225\u5f62\u5f0f\u306e\u753b\u50cf(PNG\u306a\u3069)\u3067\u4fdd\u5b58\u3057\u305f\u3044\u30b1\u30fc\u30b9<\/li>\n<\/ul>\n<div class=\"frame_headding\">\n<h3 style=\"text-align: left;\">\nSVG\u3001Canvas\u3092\u4f7f\u7528\u3057\u305f\u30b5\u30a4\u30c8\u306e\u4f8b<\/h3>\n<\/div>\n<p>SVG\u3082Canvas\u3082\u305d\u308c\u305e\u308c\u306e\u30e1\u30ea\u30c3\u30c8\u3092\u6d3b\u304b\u3057\u305f\u30b5\u30a4\u30c8\u304c\u6570\u591a\u304f\u3042\u308a\u307e\u3059\u3002<\/p>\n<h3 style=\"text-align:left\">\u3010SVG\u3011<\/h3>\n<p>SVG\u306f\u5916\u90e8\u30d5\u30a1\u30a4\u30eb\u3068\u3057\u3066\u6271\u3044\u3084\u3059\u3044\u306e\u3067\u3001\u72ec\u7acb\u3057\u305f\u753b\u50cf\u3068\u3057\u3066\u8a2d\u7f6e\u3057\u3066\u3044\u308b\u30b5\u30a4\u30c8\u3084\u30a2\u30a4\u30b3\u30f3\u306a\u3069\u3067\u3088\u304f\u5229\u7528\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u4f8b\u3048\u3070\u3001\u4ee5\u524d\u7d39\u4ecb\u3057\u305f<a href=\"http:\/\/stylus-lang.com\/\" target=\"_blank\" rel=\"nofollow\">Stylus\u306e\u516c\u5f0f\u30b5\u30a4\u30c8<\/a>\u3067\u306f\u3001Stylus\u306e\u30ed\u30b4\u3092SVG\u3067\u5b9f\u73fe\u3057\u3066\u3044\u307e\u3059\u3002\u307e\u305f\u3001<a href=\"https:\/\/www.iconfinder.com\/\" target=\"_blank\" rel=\"nofollow\">Iconfinder<\/a>\u306e\u3088\u3046\u306b\u3001\u6570\u591a\u304f\u306e\u30a2\u30a4\u30b3\u30f3\u304cSVG\u5f62\u5f0f\u3067\u516c\u958b\u3055\u308c\u3066\u304a\u308a\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u53ef\u80fd\u306a\u30b5\u30a4\u30c8\u3082\u6709\u308a\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_2578\" aria-describedby=\"caption-attachment-2578\" style=\"width: 540px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" src=\"https:\/\/storage.googleapis.com\/sitest-wp\/blog\/wp-content\/uploads\/2016\/05\/blog_04_sample_1.png\" alt=\"Iconfinder\" width=\"540\" height=\"360\" class=\"size-full wp-image-2578\" \/><figcaption id=\"caption-attachment-2578\" class=\"wp-caption-text\">Iconfinder<\/figcaption><\/figure>\n<h3 style=\"text-align:left;margin-top:2em\">\u3010Canvas\u3011<\/h3>\n<p>\u4e00\u65b9Canvas\u3067\u306f\u3001\u7d30\u304b\u3044\u63cf\u753b\u3092\u6d3b\u304b\u3057\u305f\u3044\u30b5\u30a4\u30c8\u306b\u5411\u3044\u3066\u3044\u307e\u3059\u3002\u63cf\u753b\u6a5f\u80fd\u3068JavaScript\u306a\u3069\u3092\u7d44\u307f\u5408\u308f\u305b\u3066\u3001<a href=\"https:\/\/github.com\/platzhersh\/pacman-canvas\" target=\"_blank\" rel=\"nofollow\">pacman-canvas<\/a>\u306a\u3069Canvas\u3092\u4f7f\u3063\u305f\u30b2\u30fc\u30e0\u3082\u6570\u591a\u304f\u516c\u958b\u3055\u308c\u3066\u304a\u308a\u307e\u3059\u3002<\/p>\n<figure id=\"attachment_2579\" aria-describedby=\"caption-attachment-2579\" style=\"width: 540px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" src=\"https:\/\/storage.googleapis.com\/sitest-wp\/blog\/wp-content\/uploads\/2016\/05\/blog_04_sample_2.png\" alt=\"pacman-canvas\" width=\"540\" height=\"360\" class=\"size-full wp-image-2579\" \/><figcaption id=\"caption-attachment-2579\" class=\"wp-caption-text\">pacman-canvas<\/figcaption><\/figure>\n<p style=\"margin-bottom: 2em\">\n<p>\u5f0a\u793e\u306eSiTest\u3067\u3082\u30b7\u30fc\u30f3\u306b\u5fdc\u3058\u3066\u4f7f\u3044\u5206\u3051\u3066\u304a\u308a\u3001\u4f8b\u3048\u3070<a href=\"https:\/\/sitest.jp\/gazeplot\/\" target=\"_blank\" rel=\"nofollow\">\u30b2\u30a4\u30ba\u30d7\u30ed\u30c3\u30c8<\/a>\u3067\u306fSVG\u3092\u3001<\/p>\n<p><img loading=\"lazy\" src=\"https:\/\/storage.googleapis.com\/sitest-wp\/blog\/wp-content\/uploads\/2016\/04\/illust-gazeplot.png\" alt=\"\u30b2\u30a4\u30ba\u30d7\u30ed\u30c3\u30c8\u30fb\u30a4\u30e1\u30fc\u30b8\" width=\"351\" height=\"238\" class=\"alignnone size-full wp-image-2511\" \/><\/p>\n<p><a href=\"https:\/\/sitest.jp\/heatmap\/graphy\/\" target=\"_blank\" rel=\"nofollow\">\u30de\u30a6\u30b9\u30b0\u30e9\u30d5\u30a3<\/a>\u3067\u306fCanvas\u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p><img loading=\"lazy\" src=\"https:\/\/storage.googleapis.com\/sitest-wp\/blog\/wp-content\/uploads\/2016\/04\/illust-mousegraphy.png\" alt=\"\u30de\u30a6\u30b9\u30b0\u30e9\u30d5\u30a3\u30fb\u30a4\u30e1\u30fc\u30b8\" width=\"351\" height=\"238\" class=\"alignnone size-full wp-image-2512\" \/><\/p>\n<p>\u5148\u65e5\u306e\u8a18\u4e8b\u3067\u7d39\u4ecb\u3057\u305f<a href=\"http:\/\/sitest.jp\/blog\/?p=2298\" target=\"_blank\">HTML5.1<\/a>\u306b\u304a\u3044\u3066\u3082\u3001\u3082\u3061\u308d\u3093\u5f15\u304d\u7d9a\u304dSVG\/Canvas\u306f\u4f7f\u7528\u3055\u308c\u7d9a\u3051\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u30b7\u30fc\u30f3\u306b\u5fdc\u3058\u3066\u4f7f\u3044\u5206\u3051\u3066\u3001HTML5\u3067\u306e\u63cf\u753b\u3092\u52b9\u679c\u7684\u306b\u884c\u3044\u307e\u3057\u3087\u3046\uff01<\/p>\n<h4>\u3010\u53c2\u8003\u3011<\/h4>\n<p>SVG \u3068 Canvas: \u3069\u3061\u3089\u3092\u9078\u3076\u304b<br \/>\n<a href=\"https:\/\/msdn.microsoft.com\/ja-jp\/library\/gg193983(v=vs.85).aspx\" target=\"_blank\" rel=\"nofollow\">https:\/\/msdn.microsoft.com\/ja-jp\/library\/gg193983(v=vs.85).aspx<\/a><\/p>\n<p>svg vs canvas @html5<br \/>\n<a href=\"http:\/\/qiita.com\/Itomaki\/items\/9d3872f89e1fa07404d6\" target=\"_blank\" rel=\"nofollow\">http:\/\/qiita.com\/Itomaki\/items\/9d3872f89e1fa07404d6<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3053\u3093\u306b\u3061\u306f\u3001SiTest\u4e8b\u696d\u90e8\u30a8\u30f3\u30b8\u30cb\u30a2\u306e\u68ee\u6c38\u3067\u3059\u3002 HTML5\u306b\u304a\u3044\u3066\u63cf\u753b\u3092\u884c\u3046\u65b9\u6cd5\u3068\u3057\u3066\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u3066\u304a\u308a\u3001\u3088\u304f\u4f7f\u308f\u308c\u3066\u3044\u308b\u3082\u306e\u3068\u3057\u3066SVG\u3068Canvas\u304c\u6319\u3052\u3089\u308c\u307e\u3059\u3002\u3053\u308c\u3089\u304c\u6b63\u5f0f\u306b\u30b5\u30dd\u30fc\u30c8\u3055\u308cWeb\u30b5\u30a4\u30c8\u306b\u304a\u3051\u308b\u63cf\u753b\u304c\u884c\u3048\u308b\u3088\u3046\u306b\u306a\u308a\u3001\u5e45\u5e83\u304f\u4f7f\u308f\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002 HTML5\u306e\u6b63\u5f0f\u52e7\u544a\u524d\u304b\u3089\u4f7f\u7528\u3067\u304d\u308b\u30d6\u30e9\u30a6\u30b6\u3082\u591a\u304b\u3063\u305f\u305f\u3081\u65e2\u306b\u3054\u5b58\u3058\u306e\u65b9\u3082\u591a\u3044\u304b\u3068\u601d\u3044\u307e\u3059\u304c\u3001\u4eca\u56de\u306f\u6539\u3081\u3066SVG\u3068Canv [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":2573,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[27],"tags":[],"acf":false,"_links":{"self":[{"href":"https:\/\/sitest.jp\/blog\/wp-json\/wp\/v2\/posts\/2498"}],"collection":[{"href":"https:\/\/sitest.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sitest.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sitest.jp\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/sitest.jp\/blog\/wp-json\/wp\/v2\/comments?post=2498"}],"version-history":[{"count":34,"href":"https:\/\/sitest.jp\/blog\/wp-json\/wp\/v2\/posts\/2498\/revisions"}],"predecessor-version":[{"id":8081,"href":"https:\/\/sitest.jp\/blog\/wp-json\/wp\/v2\/posts\/2498\/revisions\/8081"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sitest.jp\/blog\/wp-json\/wp\/v2\/media\/2573"}],"wp:attachment":[{"href":"https:\/\/sitest.jp\/blog\/wp-json\/wp\/v2\/media?parent=2498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sitest.jp\/blog\/wp-json\/wp\/v2\/categories?post=2498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sitest.jp\/blog\/wp-json\/wp\/v2\/tags?post=2498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}