Google Fontsを使ったHTMLをSVGを介してcanvas要素に描画する defghi1977 Follow 2017-02-23 11:56:41 License: MIT License Fork0 Fav0 View296 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 69 lines HTML 1 lines CSS 10 lines http://stackoverflow.com/questions/42402584/how-to-use-google-fonts-in-canvas-when-drawing-dom-objects-in-svg How to use Google fonts in Canvas when Drawing DOM objects in SVG? Google Fontsを使ったHTMLをSVGを介してcanvas要素に描画する "use strict"; window.onload = e=>{ const canvas = document.querySelector("canvas"); canvas.width = 200; canvas.height = 200; const ctx = canvas.getContext("2d"); //(1)get css as a text. const request = new XMLHttpRequest(); request.open("get", "https://fonts.googleapis.com/css?family=Pangolin"); request.responseType = "text"; request.onloadend = () => { //(2)find all font urls. let css = request.response; const fontURLs = css.match(/https?:\/\/[^ \)]+/g); let loaded = 0; fontURLs.forEach(url => { //(3)get each font binary. const request = new XMLHttpRequest(); request.open("get", url); request.responseType = "blob"; request.onloadend = () => { //(4)conver font blob to binary string. const reader = new FileReader(); reader.onloadend = () => { //(5)replace font url by binary string. css = css.replace(new RegExp(url), reader.result); loaded++; //check all fonts are replaced. if(loaded == fontURLs.length){ draw(css); } }; reader.readAsDataURL(request.response); }; request.send(); }); }; //(6)insert converted css to SVG. function draw(css){ const svg = ` <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px" veiwBox="0 0 200 200"> <style><![CDATA[ ${css} div{ /*you can use google fonts like this*/ font-family: 'Pangolin'; font-size: 30px; font-weight: bold; color: blue; } ]]></style> <foreignObject width="100%" height="100%"> <div xmlns="http://www.w3.org/1999/xhtml" x="0" y="30">It's Google Fonts.</div> </foreignObject> </svg> `; //(7)draw SVG to canvas element. const img = new Image(); img.onload = () => ctx.drawImage(img, 0, 0); img.src = "data:image/svg+xml," + encodeURIComponent(svg); } request.send(); } <canvas></canvas> Google Fontsを使ったHTMLをSVGを介してcanvas要素に描画する * { margin: 0; padding: 0; border: 0; } body { background: #ffd; font: 30px sans-serif; } http://stackoverflow.com/questions/42402584/how-to-use-google-fonts-in-canvas-when-drawing-dom-objects-in-svg How to use Google fonts in Canvas when Drawing DOM objects in SVG? "use strict"; window.onload = e=>{ const canvas = document.querySelector("canvas"); canvas.width = 200; canvas.height = 200; const ctx = canvas.getContext("2d"); //(1)get css as a text. const request = new XMLHttpRequest(); request.open("get", "https://fonts.googleapis.com/css?family=Pangolin"); request.responseType = "text"; request.onloadend = () => { //(2)find all font urls. let css = request.response; const fontURLs = css.match(/https?:\/\/[^ \)]+/g); let loaded = 0; fontURLs.forEach(url => { //(3)get each font binary. const request = new XMLHttpRequest(); request.open("get", url); request.responseType = "blob"; request.onloadend = () => { //(4)conver font blob to binary string. const reader = new FileReader(); reader.onloadend = () => { //(5)replace font url by binary string. css = css.replace(new RegExp(url), reader.result); loaded++; //check all fonts are replaced. if(loaded == fontURLs.length){ draw(css); } }; reader.readAsDataURL(request.response); }; request.send(); }); }; //(6)insert converted css to SVG. function draw(css){ const svg = ` <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px" veiwBox="0 0 200 200"> <style><![CDATA[ ${css} div{ /*you can use google fonts like this*/ font-family: 'Pangolin'; font-size: 30px; font-weight: bold; color: blue; } ]]></style> <foreignObject width="100%" height="100%"> <div xmlns="http://www.w3.org/1999/xhtml" x="0" y="30">It's Google Fonts.</div> </foreignObject> </svg> `; //(7)draw SVG to canvas element. const img = new Image(); img.onload = () => ctx.drawImage(img, 0, 0); img.src = "data:image/svg+xml," + encodeURIComponent(svg); } request.send(); } <canvas></canvas> * { margin: 0; padding: 0; border: 0; } body { background: #ffd; font: 30px sans-serif; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? http://stackoverflow.com/questions/42402584/how-to-use-google-fonts-in-canvas-when-drawing-dom-objects-in-svg How to use Google fonts in Canvas when Drawing DOM objects in SVG? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author defghi1977 URLhttp://defghi1977-onblog.blogspot.jp/ svgはいんすぴれーしょん http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo.htm 重箱の隅っこをつっついて，にんまり． ドキュメントにまとめて，にっこり． Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/K53D/js"></script> application canvas css css3 html5 html5_elements&api javascript library&test svg user_interface Discussion Questions on this code? Tags application canvas css css3 html5 html5_elements&api javascript library&test svg user_interface
