{"id":9043,"date":"2015-12-13T09:00:48","date_gmt":"2015-12-13T00:00:48","guid":{"rendered":"http:\/\/www.techscore.com\/blog\/?p=9043"},"modified":"2018-11-14T16:33:46","modified_gmt":"2018-11-14T07:33:46","slug":"wind_visualization","status":"publish","type":"post","link":"https:\/\/www.techscore.com\/blog\/2015\/12\/13\/wind_visualization\/","title":{"rendered":"\u98a8\u30c7\u30fc\u30bf\u3092\u30d3\u30b8\u30e5\u30a2\u30eb\u306b\u8868\u73fe\u3059\u308b"},"content":{"rendered":"
\u3053\u3093\u306b\u3061\u306f\u3001\u68b6\u539f\u3067\u3059\u3002 \u3042\u308c\u306f\u5fd8\u308c\u3082\u3057\u307e\u305b\u3093\u3002\u5927\u962a\u306e\u74b0\u72b6\u7dda\u3092\u6b62\u3081\u308b\u307b\u3069\u306e\u53f0\u98a8\u304c\u6765\u305f\u65e5\u306e\u4e8b\u3067\u3059\u3002<\/p>\n \u30c6\u30ec\u30d3\u3092\u89b3\u3066\u3044\u308b\u3068\u3001NHK\u304c\u5929\u6c17\u30fb\u707d\u5bb3\u60c5\u5831\u3092\u653e\u9001\u3057\u3066\u3044\u307e\u3057\u305f\u304c\u3001\u3068\u3066\u3082\u30ab\u30c3\u30b3\u3088\u304f\u3001\u308f\u304b\u308a\u3084\u3059\u3044\u30d3\u30b8\u30e5\u30a2\u30eb\u8868\u73fe\u3092\u3057\u3066\u3044\u307e\u3057\u305f\u3002\u753b\u9762\u4e0a\u306b\u306f\u300cDIGITAL EARTH\u300d\u3068\u8a18\u8f09\u3055\u308c\u3066\u304a\u308a\u3001NHK\u306e\u65b0\u30b7\u30b9\u30c6\u30e0\u3060\u3063\u305f\u3088\u3046\u3067\u3059\u3002<\/p>\n (\u53c2\u8003) \u300cNHK\u30c7\u30b8\u30bf\u30eb\u30a2\u30fc\u30b9\u300d\u304c\u51c4\u3044<\/a><\/p>\n \u7279\u306b\u98a8\u306e\u8868\u73fe\u306b\u885d\u6483\u3092\u53d7\u3051\u305f\u306e\u3067\u3001\u8272\u3005\u8abf\u3079\u3066\u307f\u308b\u3068\u3001\u4e16\u754c\u98a8\u901f<\/a>\u306f\u3001\u3068\u3066\u3082\u826f\u304f\u3067\u304d\u3066\u3044\u3066\u3001\u30d5\u30ea\u30fc\u30d0\u30fc\u30b8\u30e7\u30f3\u306f\u30bd\u30fc\u30b9\u304c\u516c\u958b\u3055\u308c\u3066\u3044\u307e\u3059<\/a>\u3002<\/p>\n \u305d\u3053\u3067\u4e16\u754c\u98a8\u901f\u306e\u30bd\u30fc\u30b9\u3084\u3001\u6c17\u8c61\u30c7\u30fc\u30bf\u51e6\u7406\u3084\u5730\u56f3\u8868\u73fe\u306b\u3064\u3044\u3066\u3082\u3001\u8abf\u3079\u305f\u306e\u3067\u307e\u3068\u3081\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n \u30bd\u30fc\u30b9\u306f\u3053\u3061\u3089<\/a>\u306b\u7f6e\u3044\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n \u30d3\u30b8\u30e5\u30a2\u30eb\u8868\u73fe\u306b\u3001\u5730\u56f3\u8868\u73fe\u306f\u3064\u304d\u3082\u306e\uff01<\/p>\n \u3068\u3044\u3046\u8a33\u3067\u3001\u3053\u3061\u3089\u306f\u8272\u3005\u306a\u624b\u6cd5\u304c\u3042\u308b\u3068\u601d\u3044\u307e\u3059\u304c\u3001\u30d6\u30e9\u30a6\u30b6\u3067\u8868\u793a\u3057\u305f\u304b\u3063\u305f\u306e\u3067\u3001D3.js\u3092\u5229\u7528\u3059\u308b\u65b9\u6cd5\u304c\u4e00\u756a\u7c21\u5358\u306b\u5b9f\u73fe\u3067\u304d\u305d\u3046\u3067\u3057\u305f\u3002\u6d77\u5cb8\u7dda\u3092\u975e\u5e38\u306b\u7c21\u5358\u306bSVG\u63cf\u753b\u3067\u304d\u307e\u3059\u3002\u6d77\u5cb8\u7dda\u60c5\u5831\u81ea\u4f53\u306f\u3001Natural Earth<\/a>\u3092\u5229\u7528\u3055\u305b\u3066\u3044\u305f\u3060\u304f\u4e8b\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n \u4e0a\u8a18\u30b5\u30a4\u30c8\u3067\u624b\u306b\u5165\u308bShape\u30c7\u30fc\u30bf\u3092\u3001GeoJSON\u306b\u5909\u63db\u3057\u3066\u3001\u3055\u3089\u306b\u3088\u308a\u52b9\u7387\u7684\u306b\u51e6\u7406\u3059\u308b\u70baTopoJSON\u306b\u5909\u63db\u3057\u3066\u63cf\u753b\u3059\u308b\u306e\u304c\u4e00\u822c\u7684\u306e\u3088\u3046\u3067\u3059\u3002<\/p>\n (\u53c2\u8003) D3.js \u3068 TopoJSON\u3067\u5730\u56f3\u3092\u4f5c\u308b<\/a><\/p>\n \u51fa\u6765\u4e0a\u304c\u3063\u305fmap_topo.json\u3092\u5229\u7528\u3059\u308bhtml\/javascript\u3092\u4f5c\u6210\u3057\u3001http\u30b5\u30fc\u30d0\u306b\u7f6e\u304f\u3068<\/p>\n \u306d\u3001\u7c21\u5358\u3067\u3057\u3087(\u6c57)\uff01\u30bd\u30fc\u30b9\u306fgithub<\/a>\u306b\u304a\u3044\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n \u3053\u3060\u308f\u308a\u30dd\u30a4\u30f3\u30c8\u3068\u3057\u3066\u306f\u3001<\/p>\n \u3042\u305f\u308a\u3067\u3057\u3087\u3046\u304b\u3002\u306a\u304a\u30e2\u30f3\u30b4\u30eb\u304c\u6b20\u3051\u3066\u3044\u308b\u306e\u306f\u79d8\u5bc6\u3067\u3059\u3002\u4f59\u529b\u306e\u3042\u308b\u65b9\u306f\u3001Natural Earth\u306e\u6e56\u30c7\u30fc\u30bf\u3092\u5229\u7528\u3057\u3066\u7435\u7436\u6e56\u3092\u63cf\u3044\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n \u5730\u56f3\u3092\u63cf\u753b\u3067\u304d\u308b\u4e8b\u304c\u4e00\u756a\u91cd\u8981\u3067\u3059\u304c\u3001\u5ea7\u6a19\u5909\u63db\u30ed\u30b8\u30c3\u30af\u304c\u95a2\u6570\u3068\u3057\u3066\u518d\u5229\u7528\u3067\u304d\u308b\u4e8b\u3082\u91cd\u8981\u3067\u3059\u3002 \u6700\u8fd1\u6c17\u8c61\u30c7\u30fc\u30bf\u306e\u591a\u304f\u306f\u3001\u300cGRIB2\u300d\u5f62\u5f0f\u3068\u3044\u3046\u30d5\u30a1\u30a4\u30eb\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u3067\u914d\u4fe1\u3055\u308c\u308b\u4e8b\u304c\u591a\u3044\u3067\u3059\u3002\u3057\u304b\u3057\u3001\u3053\u306e\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u306f\u3068\u3066\u3082\u8907\u96d1\u3067\u3001\u3068\u3066\u3082\u81ea\u5206\u3067parser\u3092\u66f8\u3051\u308b\u3088\u3046\u306a\u3082\u306e\u3067\u306f\u306a\u3044\u4e8b\u304c\u308f\u304b\u308a\u307e\u3057\u305f\u3002<\/p>\n (\u53c2\u8003) \u30d5\u30a1\u30a4\u30eb\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u3092\u65e5\u672c\u8a9e\u3067\u8aac\u660e\u3055\u308c\u3066\u3044\u307e\u3059<\/a><\/p>\n \u884c\u3044\u305f\u3044\u4e8b\u306f\u30c7\u30fc\u30bf\u3092\u5229\u7528\u3059\u308b\u4e8b\u3067\u3059\u306e\u3067\u3001\u5148\u4eba\u306e\u80a9\u306b\u306e\u308b\u3079\u304f\u8abf\u3079\u308b\u3068\u3001 wgrib2\u3068\u3044\u3046\u30c4\u30fc\u30eb\u3067\u3001\u30c0\u30f3\u30d7\u3067\u304d\u308b\u4e8b\u304c\u308f\u304b\u308a\u307e\u3057\u305f\u3002\u4e0b\u8a18\u306e\u3088\u3046\u306a\u624b\u9806\u3067\u30b3\u30f3\u30d1\u30a4\u30eb\u53ef\u80fd\u3067\u3059\u3002<\/p>\n (\u53c2\u8003) \u30b3\u30f3\u30d1\u30a4\u30eb\u624b\u9806<\/a><\/p>\n wgrib2\/wgrib2\u304c\u51fa\u6765\u4e0a\u304c\u3063\u305f\u30c4\u30fc\u30eb\u306b\u306a\u308a\u307e\u3059\u3002\u8a66\u3057\u306b\u52d5\u304b\u3057\u3066\u307f\u308b\u3068...<\/p>\n \u6c17\u8c61\u30c7\u30fc\u30bf\u81ea\u4f53\u306fNOMADS<\/a>\u3084\u3001\u5b66\u8853\u76ee\u7684\u306a\u3089\u5730\u7403\u6d41\u4f53\u96fb\u8133\u5036\u697d\u90e8<\/a>\u3042\u305f\u308a\u3067\u898b\u3064\u3051\u308b\u4e8b\u304c\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n # \u696d\u52d9\u3067\u6c17\u8c61\u30c7\u30fc\u30bf\u3092\u6271\u3046\u969b\u306f\u3001\u6c17\u8c61\u696d\u52d9\u652f\u63f4\u30bb\u30f3\u30bf\u30fc<\/a>\u3088\u308a\u8cfc\u5165\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n \u3053\u3053\u3067\u306fNOMADS\u304b\u3089\u3001\u4e0b\u8a18\u30d5\u30a1\u30a4\u30eb\u30fc\u6761\u4ef6\u3067\u30c7\u30fc\u30bf\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3066\u307f\u307e\u3059\u3002grib filter\u304b\u3089\u6761\u4ef6\u3092\u9078\u629e\u3057\u3066\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3067\u304d\u307e\u3059\u3002<\/p>\n http:\/\/nomads.ncep.noaa.gov\/cgi-bin\/filter_gfs_0p25.pl?file=gfs.t00z.pgrb2.0p25.f000&lev_10_m_above_ground=on&var_UGRD=on&var_VGRD=on&dir=%2Fgfs.2015121100<\/p><\/blockquote>\n \u30c7\u30fc\u30bf\u3092\u5148\u307b\u3069\u306ewgrib2\u3067\u898b\u3066\u307f\u308b\u3068\u3001\u3069\u3093\u306a\u30c7\u30fc\u30bf\u304c\u542b\u307e\u308c\u3066\u3044\u308b\u304b\u308f\u304b\u308a\u307e\u3059\u3002<\/p>\n wgrib2\u306b\u306f\u975e\u5e38\u306b\u591a\u304f\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u304c\u3042\u308a\u307e\u3059\u306e\u3067\u3001<\/p>\n \u3068\u3057\u3066\u30c0\u30f3\u30d7\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n \u3044\u3044\u611f\u3058\u3067\u3059\u306d\u30021440 * 721 * 4 = 4152960\u306a\u306e\u3067\u3001\u3061\u3083\u3093\u3068\u30c0\u30f3\u30d7\u3067\u304d\u3066\u3044\u308b\u4e8b\u304c\u308f\u304b\u308a\u307e\u3059\u3002<\/p>\n \u305f\u3060\u3001\u7d50\u69cb\u30d5\u30a1\u30a4\u30eb\u30b5\u30a4\u30ba\u304c\u5927\u304d\u304f\u306a\u308b\u306e\u3067\u3001\u7cbe\u5ea6\u3092\u843d\u3068\u3057\u30661\u30c7\u30fc\u30bf1byte\u306b\u3059\u308b\u3068\u304b\u3001\u5fc5\u8981\u306a\u7def\u5ea6\u7d4c\u5ea6\u5185\u306b\u7d5e\u308b\u3001gzip\u5727\u7e2e\u3059\u308b\u7b49\u3001\u8272\u3005\u5de5\u592b\u306f\u3067\u304d\u308b\u3068\u601d\u3044\u307e\u3059\uff08\u3053\u3053\u3067\u306f\u8aac\u660e\u3092\u7c21\u5358\u306b\u3059\u308b\u70ba\u3001\u3053\u306e\u307e\u307e\u9032\u3081\u307e\u3059)\u3002<\/p>\n \u307e\u305f\u301cU.ieee\u306e\u3042\u3068\u306b\u301cV.ieee\u3092\u9023\u7d50\u3057\u3066\uff11\u5ea6\u306b\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\uff08\u3053\u3061\u3089\u3082\u7c21\u5358\u306e\u70ba\uff09\u3002<\/p>\n \u3055\u3066\u3001\u3053\u3053\u307e\u3067\u3067\u9053\u5177\u306f\u63c3\u3063\u305f\u306e\u3067\u3001\u98a8\u306e\u30d3\u30b8\u30e5\u30a2\u30eb\u8868\u73fe\u3092\u3057\u3066\u307f\u3088\u3046\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n \u5148\u307b\u3069\u51e6\u7406\u3057\u305f\u98a8\u30c7\u30fc\u30bf\u306f\u3001\u3042\u308b\u5730\u70b9\u3067\u306eUV\u65b9\u5411\u306e\u98a8\u306e\u5f37\u3055\u3092\u8868\u73fe\u3057\u305f\u30c7\u30fc\u30bf\u3001\u3059\u306a\u308f\u3061\u30d9\u30af\u30c8\u30eb\u5834\u3068\u3044\u3048\u308b\u70ba\u3001\u305d\u3053\u3092\u6f02\u3046\u7c92\u5b50\u3068\u3057\u3066\u53ef\u8996\u5316\u3057\u307e\u3059\u3002<\/p>\n \u5177\u4f53\u7684\u306b\u306f<\/p>\n \u3068\u3044\u3046\u30b9\u30c6\u30c3\u30d7\u3067\u63cf\u753b\u3057\u3066\u307f\u307e\u3059\u3002\u3044\u308f\u3086\u308b\u30d1\u30fc\u30c6\u30a3\u30af\u30eb\u30b7\u30b9\u30c6\u30e0<\/a>\u306e\u30a2\u30d7\u30ed\u30fc\u30c1\u306e\u4e00\u3064\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n \u5b9f\u969b\u306b\u63cf\u753b\u6642\u306b\u306f\u5e7e\u3064\u304b\u5fc5\u8981\u306a\u30c6\u30af\u30cb\u30c3\u30af\u304c\u3042\u308a\u307e\u3057\u305f\u3002<\/p>\n \u8a73\u7d30\u306f\u3001\u30bd\u30fc\u30b9\u3092\u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002\u5f53\u8a18\u4e8b\u4f5c\u6210\u306e\u70ba\u6025\u3044\u3067\u66f8\u3044\u305f\u306e\u3067\u3001\u4e0d\u5099\u306f\u3054\u5bb9\u8d66\u304f\u3060\u3055\u3044(\u6c57)<\/p>\n \u52d5\u304b\u3059\u3068\u4e0b\u8a18\u306e\u3088\u3046\u306a\u98a8\u306e\u8868\u73fe\u304c\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3057\u307e\u3059\u3002 \u662f\u975e\u52d5\u304b\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002
\n\u3053\u308c\u306f TECHSCORE Advent Calendar 2015<\/a> \u306e13\u65e5\u76ee\u306e\u8a18\u4e8b\u3067\u3059\u3002<\/p>\n<\/a><\/p>\n
\u885d\u6483\u306e\u30d3\u30b8\u30e5\u30a2\u30eb\u8868\u73fe<\/h2>\n
\u5730\u56f3\u8868\u73fe<\/h2>\n
# 50m cultural \u306e Admin0 - Countries\u3092\u5229\u7528\u3057\u307e\u3057\u305f\u3002\r\n$ wget http:\/\/www.naturalearthdata.com\/http\/\/www.naturalearthdata.com\/download\/50m\/cultural\/ne_50m_admin_0_countries.zip\r\n\r\n$ unzip ne_50m_admin_0_countries.zip \r\n\r\n# gdal\u3068topojson\u306f\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u6e08\u307f\u306e\u60f3\u5b9a\u3067\u3059\u3002\r\n\r\n# GeoJSON\u5316\u3002\u65e5\u672c\u5468\u8fba\u306e\u307f\u62bd\u51fa\u3002\r\n$ ogr2ogr -f GeoJSON -where \"adm0_a3 IN ('JPN', 'KOR', 'PRK', 'TWN', 'CHN', 'RUS')\" map_geo.json ne_50m_admin_0_countries.shp\r\n\r\n# TopoJSON\u5316\u3002\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u4f7f\u3044\u65b9\u304c\u4eca\u3072\u3068\u3064\u5206\u304b\u3063\u3066\u307e\u305b\u3093\u3002\u3002\r\n$ topojson --id-property su_a3 -p NAME=name -p name -o map_topo.json map_geo.json\r\n<\/pre>\n
<\/p>\n
\n
\n\u306a\u305c\u306a\u3089\u6b21\u306e\u6c17\u8c61\u30c7\u30fc\u30bf\u306f\u3001\u300c\u7def\u5ea6A\u3001\u7d4c\u5ea6B\u306e\u98a8\u5411\u304d\u306f\u301c\u300d\u3068\u3044\u3046\u5f62\u3067\u5f97\u3089\u308c\u308b\u70ba\u3001\u7def\u5ea6A, \u7d4c\u5ea6B\u5730\u70b9\u3092\u3001\u753b\u9762\u4e0a\u306e\u5ea7\u6a19\u306b\u5909\u63db\u3067\u304d\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u4e0a\u8a18\u306e\u5834\u5408\u3001\u4e0b\u8a18\u306e\u3088\u3046\u306a\u5909\u6570\u306b\u5165\u308c\u3066\u5f8c\u3067\u5229\u7528\u3057\u307e\u3059\u3002<\/p>\n...\r\nvar projection = d3.geo.orthographic()\r\n .scale(width * 2.0)\r\n .translate([width \/ 2, height \/ 2])\r\n .clipAngle(90)\r\n .rotate([225, -38]);\r\n...\r\n<\/pre>\n
\u6c17\u8c61\u30c7\u30fc\u30bf\u51e6\u7406<\/h2>\n
# gfortran\u304c\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u304a\u308a\u3001\u30b3\u30f3\u30d1\u30a4\u30eb\u74b0\u5883\u304c\u6574\u3063\u3066\u3044\u308b\u524d\u63d0\u3067\u3059\u3002\r\n$ wget ftp:\/\/ftp.cpc.ncep.noaa.gov\/wd51we\/wgrib2\/wgrib2.tgz\r\n$ tar xzvf wgrib2.tgz \r\n$ cd grib2\r\n$ make\r\n<\/pre>\n
$ wgrib2\/wgrib2\r\nwgrib2 v0.2.0.3 11\/2015 Wesley Ebisuzaki, Reinoud Bokhorst, John Howard, Jaakko Hyv\u00e4tti, Dusan Jovic, Kristian Nilssen, Karl Pfeiffer, Pablo Romero, Manfred Schwarb, Arlindo da Silva, Niklas Sondell, Sergey Varlamov\r\n stock build\r\n -0xSec inv X Hex dump of section X (0..8)\r\n -aerosol_size inv optical properties of an aerosol\r\n -aerosol_wavelength inv optical properties of an aerosol\r\n -bitmap inv bitmap mode\r\n...\r\n -set_ext_name init X X=0\/1 extended name on\/off\r\n -set_regex init X set regex mode X = 0:extended regex (default) 1:pattern 2:extended regex & quote metacharacters\r\n -tigge init use modified-TIGGE grib table\r\n -transient init X make file X transient, CW2\r\n<\/pre>\n
\n
$ .\/wgrib2 -V data\/2015121100.dat \r\n1:0:vt=2015121100:10 m above ground:anl:UGRD U-Component of Wind [m\/s]:\r\n ndata=1038240:undef=0:mean=-0.108394:min=-19.33:max=29.75\r\n grid_template=0:winds(N\/S):\r\n\tlat-lon grid:(1440 x 721) units 1e-06 input WE:NS output WE:SN res 48\r\n\tlat 90.000000 to -90.000000 by 0.250000\r\n\tlon 0.000000 to 359.750000 by 0.250000 #points=1038240\r\n\r\n2:829559:vt=2015121100:10 m above ground:anl:VGRD V-Component of Wind [m\/s]:\r\n ndata=1038240:undef=0:mean=-0.0255382:min=-22.68:max=27.58\r\n grid_template=0:winds(N\/S):\r\n\tlat-lon grid:(1440 x 721) units 1e-06 input WE:NS output WE:SN res 48\r\n\tlat 90.000000 to -90.000000 by 0.250000\r\n\tlon 0.000000 to 359.750000 by 0.250000 #points=1038240\r\n<\/pre>\n
\n
$ .\/wgrib2 -d 1 data\/2015121100.dat -order we:ns -no_header -ieee data\/2015121100-U.ieee\r\n$ .\/wgrib2 -d 2 data\/2015121100.dat -order we:ns -no_header -ieee data\/2015121100-V.ieee\r\n$ ls -la data\/*.ieee\r\n-rw-r--r-- 1 kennyj staff 4152960 12 12 15:00 data\/2015121100-U.ieee\r\n-rw-r--r-- 1 kennyj staff 4152960 12 12 15:00 data\/2015121100-V.ieee\r\n<\/pre>\n
cat data\/2015121100-U.ieee data\/2015121100-V.ieee > dest\/data\/wind.ieee\r\n<\/pre>\n
\u98a8\u306e\u30d3\u30b8\u30e5\u30a2\u30eb\u8868\u73fe\u306b\u6311\u6226<\/h2>\n
\n
\n
\n
var ctx = canvas.node().getContext(\"2d\");\r\n\r\n\/\/ canvas\u3092\u5c11\u3057\u6697\u304f\r\nctx.fillStyle = \"rgba(0, 0, 0, 0.90)\";\r\nvar prev = ctx.globalCompositeOperation;\r\nctx.globalCompositeOperation = \"destination-in\";\r\nctx.fillRect(0, 0, canvas.attr(\"width\"), canvas.attr(\"height\"));\r\nctx.globalCompositeOperation = prev;\r\n<\/pre>\n
\ngithub\u304b\u3089clone\u5f8c\u300101~03\u306esh\u3092\u5b9f\u884c\u3059\u308b\u3068\u3001\u5fc5\u8981\u306a\u30c7\u30fc\u30bf\u306f\u3001\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3067\u304d\u308b\u3068\u601d\u3044\u307e\u3059\uff08\u95a2\u9023\u3059\u308b\u30d7\u30ed\u30c0\u30af\u30c8\u306f\u53c2\u7167\u30da\u30fc\u30b8\u3092\u53c2\u8003\u306b\u3054\u6e96\u5099\u4e0b\u3055\u3044)\u3002<\/p>\n