{"id":394,"date":"2015-02-01T15:05:01","date_gmt":"2015-02-01T07:05:01","guid":{"rendered":"http:\/\/www.hightopo.com\/blog\/?p=394"},"modified":"2015-02-01T15:07:06","modified_gmt":"2015-02-01T07:07:06","slug":"%e7%bb%98%e5%88%b6svg%e5%86%85%e5%ae%b9%e5%88%b0canvas%e7%9a%84html5%e5%ba%94%e7%94%a8","status":"publish","type":"post","link":"https:\/\/www.hightopo.com\/blog\/394.html","title":{"rendered":"\u7ed8\u5236SVG\u5185\u5bb9\u5230Canvas\u7684HTML5\u5e94\u7528"},"content":{"rendered":"

SVG\u4e0eCanvas\u662fHTML5\u4e0a\u7ed8\u5236\u56fe\u5f62\u5e94\u7528\u7684\u4e24\u79cd\u5b8c\u5168\u4e0d\u540c\u6a21\u5f0f\u7684\u6280\u672f\uff0c\u4e24\u79cd\u7ed8\u5236\u56fe\u5f62\u65b9\u5f0f\u5404\u6709\u4f18\u7f3a\u70b9\uff0c\u4f46\u4e24\u8005\u5e76\u975e\u6c34\u706b\u4e0d\u5bb9\uff0c\u5c24\u5176\u662fSVG\u5185\u5bb9\u53ef\u76f4\u63a5\u7ed8\u5236\u5728Canvas\u4e0a\u7684\u529f\u80fd\uff0c\u4f7f\u5f97\u4e24\u8005\u53ef\u4ee5\u5b8c\u7f8e\u7684\u878d\u5408\u5728\u4e00\u8d77\uff0c\u8ba9Canvas\u53ef\u4eab\u7528\u5230\u73b0\u6709\u4e30\u5bcc\u7684SVG\u7d20\u6750\uff0c\u5e76\u4e0d\u5931SVG\u77e2\u91cf\u65e0\u7ea7\u7f29\u653e\u7684\u7279\u70b9\u3002<\/p>\n

\u300a\u57fa\u4e8eHTML5\u7684Drag and Drop\u751f\u6210\u56fe\u7247Base64\u4fe1\u606f<\/a>\u300b\u8fd9\u7bc7\u867d\u7136\u5c55\u793a\u7684\u662f\u62d6\u62fd\u666e\u901a\u6805\u683c\u56fe\u7247\u7684\u6548\u679c\uff0c\u4f46\u4f60\u4e5f\u53ef\u4ee5\u76f4\u63a5\u62d6\u62fdSVG\u683c\u5f0f\u7684\u56fe\u7247\u8fdb\u884c\u663e\u793a\uff0c\u53ea\u4e0d\u8fc7\u666e\u901a\u56fe\u7247\u7684\u683c\u5f0f\u6570\u636e\u4e3adata:image\/png\u7c7b\u578b\uff0c\u800cSVG\u683c\u5f0f\u7684\u6570\u636e\u7c7b\u578b\u4e3adata:image\/svg+xml\u7684\u7c7b\u578b\uff0c\u4e0b\u56fe\u4e3a\u8be5HT for Web<\/a>\u62d3\u6251\u56fe\u62d6\u62fd\u5165SVG\u683c\u5f0f\u56fe\u7247\u7684\u8fd0\u884c\u6548\u679c\uff1a<\/p>\n

\"Screen<\/a><\/p>\n

\u4ee5\u4e0b\u4e00\u6bb5\u5c0f\u4f8b\u5b50\uff0c\u5c55\u793a\u4e86\u52a0\u8f7d\u4e00\u4e2aSVG\u56fe\u7247\u540e\uff0c\u5206\u4e3a\u4e03\u4e2a\u57fa\u672c\u8fdb\u884c\u7f29\u653e\u7ed8\u5236\u7684\u6548\u679c\uff0c\u53ef\u770b\u51faCanvas\u7ed8\u5236SVG\u53ef\u4fdd\u6301\u5176\u77e2\u91cf\u4e0d\u5931\u771f\u7684\u7279\u6027<\/p>\n

        function draw(){\r\n            var img = new Image();\r\n            img.src = 'chart.svg';\r\n            document.body.appendChild(img);\r\n            img.onload = function(){\r\n                var canvas = document.getElementById('canvas');\r\n                var g = canvas.getContext('2d'); \r\n                var width = img.clientWidth * 1.5;\r\n                var height = img.clientHeight * 1.5;                \r\n                var x = 2;\r\n                var y = 2;\r\n                for(var i=0; i<7; i++){\r\n                    g.drawImage(img, x, y, width, height);\r\n                    x += width + 2;\r\n                    width \/= 2;\r\n                    height \/= 2;\r\n                }            \r\n            };\r\n        }<\/pre>\n
\"Screen<\/a><\/p>\n
\u63d0\u5230Canvas\u548cSVG\u7684\u878d\u5408\uff0c\u6211\u4eec\u5c06\u91c7\u7528HT for Web<\/a>\u7684\u77e2\u91cf\u529f\u80fd\u5c55\u793a\u4e00\u4e2a\u624b\u673a\u7535\u6c60\u5145\u7535\u8fdb\u5ea6\u7684\u5b9e\u4f8b\uff0c\u6574\u4e2a\u624b\u673a\u7535\u6c60\u7684\u9759\u6001\u90e8\u5206\u6211\u4eec\u901a\u8fc7\u52a0\u8f7d\u4e00\u4e2a\u7b80\u5355\u7684SVG\u7d20\u6750\u5b9e\u73b0\uff0c\u800c\u5145\u7535\u52a8\u6001\u53d8\u5316\u7684\u90e8\u5206\uff0c\u6211\u4eec\u91c7\u7528\u4e00\u4e2a\u6e10\u8fdb\u8272\u7684HT<\/a>\u77e9\u5f62\u5143\u7d20\u6765\u63cf\u8ff0\uff0c\u8be5\u77e9\u5f62\u7684\u957f\u5ea6\u901a\u8fc7HT<\/a>\u77e2\u91cf\u6570\u636e\u52a8\u6001\u7ed1\u5b9a\u529f\u80fd\uff0c\u6839\u636e\u5145\u7535\u8fdb\u5ea6\u7684\u767e\u5206\u6bd4\u6362\u7b97\u6210\u957f\u5ea6\u4fe1\u606f\uff0c\u6700\u540e\u901a\u8fc7\u5b9a\u65f6\u5668\u6a21\u62df\u6570\u636e\u53d8\u5316\u8fbe\u5230\u52a8\u6001\u5145\u7535\u7684\u6548\u679c\uff1a<\/p>\n
\"Screen<\/a><\/p>\n
ht.Default.setImage('battery', {\r\n\twidth: 64,\r\n\theight: 64,\r\n\tcomps: [   \r\n\t\t{\r\n\t\t\ttype: 'rect',\r\n\t\t\trect: {\r\n\t\t\t\tfunc: function(data){\r\n\t\t\t\t\treturn [5, 25, 50*data.a('percent'), 16]\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tbackground: 'red',\r\n\t\t\tgradient: 'spread.vertical'\r\n\t\t},                        \r\n\t\t{\r\n\t\t\ttype: 'image',\r\n\t\t\tname: 'battery.svg',\r\n\t\t\trelative: true,\r\n\t\t\trect: [0, 0, 1, 1]\r\n\t\t}\r\n\t]\r\n});               \r\n\r\nvar node = new ht.Node();\r\nnode.setPosition(80, 150);\r\nnode.setImage('battery');\r\nnode.s('image.stretch', 'uniform');\r\nnode.a('percent', 0);\r\ndataModel.add(node);   \r\n\r\ngraphView.setEditable(true);\r\n\r\nsetInterval(function(){\r\n\tpercent = node.a('percent') + 0.02;\r\n\tif(percent > 1){\r\n\t\tpercent = 0;\r\n\t}\r\n\tnode.a('percent', percent);\r\n}, 16);<\/pre>\n
SVG\u7ed8\u5236\u5230Canvas\u8fd8\u6709\u4e00\u79cd\u7279\u6b8a\u7684\u5e94\u7528\u573a\u666f\uff0c\u5c31\u662f\u5c06HTML\u5143\u7d20\u901a\u8fc7SVG\u7684foreignObject\u7279\u6027\u63cf\u8ff0\u5728SVG\u4e2d\uff0c\u7136\u540eCanvas\u7ed8\u5236SVG\u65f6\uff0c\u5373\u53ef\u628aforeignObject\u63cf\u8ff0\u7684HTML\u5185\u5bb9\u7ed8\u5236\u5230Canvas\u4e0a\uff0c\u53ef\u53c2\u89c1https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Canvas_API\/Drawing_DOM_objects_into_a_canvas<\/a>\u00a0\u7684\u5b9e\u4f8b\uff0c\u5176\u4e2d\u91c7\u7528\u4e86Blob\u7684\u65b9\u5f0f\u8bbe\u7f6eimg\u7684src\u4f5c\u4e3aURL\u662f\u6bd4\u8f83\u602a\u5f02\u7684\u6280\u672f\u70b9\uff0c\u4f46\u4ece\u4e0a\u6587\u63d0\u5230\u5176\u5b9e\u6211\u4eec\u53ef\u4ee5\u5c06\u6574\u4e2aSVG\u5185\u5bb9\u8f6c\u6362\u6210data:image\/svg+xml;\u7684base64\u5185\u5bb9\u5373\u53ef\u4f5c\u4e3asrc\u7684url\u4f20\u5165\uff0c\u56e0\u6b64\u6211\u5bf9\u8be5\u4f8b\u5b50\u505a\u4e86\u6539\u9020\uff0c\u91c7\u7528btoa(data)\u628asvg\u5185\u5bb9\u8f6c\u6362\u6210base64\u7684\u65b9\u5f0f\u8bbe\u7f6eimg.src\uff0c\u8fd9\u6837\u65b9\u5f0f\u66f4\u5bb9\u6613\u7406\u89e3\uff0c\u4f8b\u5b50\u4ee3\u7801\u548c\u6548\u679c\u5982\u4e0b\uff1ahttp:\/\/v.youku.com\/v_show\/id_XODg0MTU4NjEy.html<\/a><\/p>\n
\"Screen<\/a><\/p>\n
function draw(){\r\n\tvar canvas = document.getElementById('canvas');\r\n\tvar ctx = canvas.getContext('2d');\r\n\tvar data = \u3002\u3002\u3002;\r\n\tvar img = new Image();\r\n\timg.onload = function () {\r\n\t\tctx.drawImage(img, 0, 0);\r\n\t};            \r\n\timg.src = 'data:image\/svg+xml;base64,' + btoa(data);\r\n}<\/pre>\n