{"id":41,"date":"2009-04-20T23:13:26","date_gmt":"2009-04-20T15:13:26","guid":{"rendered":"http:\/\/tmp.xujiwei.com\/blog\/?p=41"},"modified":"2010-01-28T23:22:21","modified_gmt":"2010-01-28T15:22:21","slug":"canvas-starts-part1","status":"publish","type":"post","link":"https:\/\/xujiwei.com\/blog\/2009\/04\/canvas-starts-part1\/","title":{"rendered":"HTML5 Canvas \u8d77\u6b65(1) &#8211; \u57fa\u672c\u6982\u5ff5"},"content":{"rendered":"<p><strong>\u4ec0\u4e48\u662fCanvas<\/strong><\/p>\n<p>&lt;canvas&gt;\u00a0\u662f\u4e00\u4e2a\u65b0\u7684\u00a0HTML\u00a0\u5143\u7d20\uff0c\u8fd9\u4e2a\u5143\u7d20\u5728\u00a0<a rel=\"external\" href=\"http:\/\/www.whatwg.org\/specs\/web-apps\/current-work\/\">HTML5<\/a> \u4e2d\u88ab\u5b9a\u4e49\u3002\u8fd9\u4e2a\u5143\u7d20\u901a\u5e38\u53ef\u4ee5\u88ab\u7528\u6765\u5728\u00a0HTML\u00a0\u9875\u9762\u4e2d\u901a\u8fc7\u00a0JavaScript\u00a0\u8fdb\u884c\u7ed8\u5236\u56fe\u5f62\u3001\u5408\u6210\u56fe\u50cf\u7b49\u7b49\u64cd\u4f5c\uff0c\u4e5f\u53ef\u4ee5\u7528\u6765\u505a\u4e00\u4e9b\u52a8\u753b\u3002\u5f53\u7136\uff0c\u76ee\u524d\u00a0HTML5\u00a0\u89c4\u8303\u8fd8\u5728\u8349\u7a3f\u9636\u6bb5\uff0c\u6b63\u5f0f\u53d1\u5e03\u4e5f\u8bb8\u8981\u7b49\u52302010\u5e74\uff0c\u4e0d\u8fc7\u73b0\u5728\u5df2\u7ecf\u6709\u4e0d\u5c11\u6d4f\u89c8\u5668\u5df2\u7ecf\u652f\u6301\u4e86\u90e8\u5206\u00a0HTML5\u00a0\u89c4\u8303\u3002\u76ee\u524d\u652f\u6301\u00a0canvas\u00a0\u5143\u7d20\u7684\u6d4f\u89c8\u5668\u6709\u00a0Firefox\u00a03+\u3001Safari\u00a04\u3001Chrome\u00a02.0+\u00a0\u7b49\uff0c\u56e0\u6b64\uff0c\u5728\u8fd0\u884c\u672c\u9875\u4e2d\u7684\u4f8b\u5b50\u65f6\uff0c\u8bf7\u786e\u4fdd\u4f60\u4f7f\u7528\u7684\u662f\u4e0a\u8ff0\u6d4f\u89c8\u5668\u4e4b\u4e00\u3002<\/p>\n<p>\u5c3d\u7ba1\u5728\u00a0<a rel=\"external\" href=\"http:\/\/www.mozilla.org\/\">Mozilla<\/a> \u5df2\u7ecf\u6709\u4e0d\u5c11\u5173\u4e8e\u00a0Canvas\u00a0\u7684\u6559\u7a0b\uff0c\u6211\u8fd8\u662f\u51b3\u5b9a\u628a\u81ea\u5df1\u7684\u5b66\u4e60\u8fc7\u7a0b\u8bb0\u5f55\u4e0b\u6765\u3002\u5982\u679c\u89c9\u5f97\u6211\u5199\u7684\u4e0d\u591f\u660e\u767d\uff0c\u90a3\u4e48\u4f60\u53ef\u4ee5\u5728\u53c2\u8003\u8d44\u6599\u4e2d\u627e\u5230\u00a0Mozilla\u00a0\u7f51\u7ad9\u4e0a\u00a0Canvas\u00a0\u6559\u7a0b\u7684\u94fe\u63a5\u3002<\/p>\n<p>\u53e6\u5916\uff0c\u53ef\u4ee5\u5728<a rel=\"external\" href=\"http:\/\/hred.javaeye.com\/blog\/146568\">\u8fd9\u91cc<\/a>\u627e\u5230\u4e00\u4e9b\u6709\u8da3\u7684\u00a0Canvas\u00a0\u793a\u4f8b\u3002<\/p>\n<p><strong>\u5f00\u59cb\u4f7f\u7528\u00a0Canvas<\/strong><\/p>\n<p>\u4f7f\u7528\u00a0Canvas\u00a0\u5f88\u7b80\u5355\uff0c\u4e0e\u4f7f\u7528\u5176\u4ed6\u00a0HTML\u00a0\u5143\u7d20\u4e00\u6837\uff0c\u53ea\u9700\u8981\u5728\u9875\u9762\u4e2d\u6dfb\u52a0\u4e00\u4e2a\u00a0&lt;canvas&gt;\u00a0\u6807\u7b7e\u5373\u53ef\uff1a<\/p>\n<pre lang=\"html4strict\" escaped=\"true\">&lt;canvas id=\"screen\" width=\"400\" height=\"400\"&gt;&lt;\/canvas&gt;<\/pre>\n<p>\u5f53\u7136\uff0c\u8fd9\u6837\u53ea\u662f\u7b80\u5355\u7684\u521b\u5efa\u4e86\u4e00\u4e2a Canvas \u5bf9\u8c61\u800c\u5df2\uff0c\u5e76\u6ca1\u6709\u5bf9\u5b83\u8fdb\u884c\u4efb\u4f55\u64cd\u4f5c\uff0c\u8fd9\u4e2a\u65f6\u5019\u7684 canvas \u5143\u7d20\u770b\u4e0a\u53bb\u4e0e div \u5143\u7d20\u662f\u6ca1\u4ec0\u4e48\u533a\u522b\u7684\uff0c\u5728\u9875\u9762\u4e0a\u4ec0\u4e48\u90fd\u770b\u4e0d\u51fa\u6765\uff1a\uff09<\/p>\n<p>\u53e6\u5916\uff0ccanvas \u5143\u7d20\u7684\u5927\u5c0f\u53ef\u4ee5\u901a\u8fc7 width \u4e0e height \u5c5e\u6027\u6765\u6307\u5b9a\uff0c\u8fd9\u4e0e img \u5143\u7d20\u6709\u70b9\u76f8\u4f3c\u3002<\/p>\n<p><strong>Canvas\u00a0\u7684\u6838\u5fc3\uff1aContext<\/strong><\/p>\n<p>\u524d\u9762\u8bf4\u5230\u53ef\u4ee5\u901a\u8fc7\u00a0JavaScript\u00a0\u6765\u64cd\u4f5c\u00a0Canvas\u00a0\u5bf9\u8c61\u6765\u8fdb\u884c\u7ed8\u5236\u56fe\u5f62\u3001\u5408\u6210\u56fe\u50cf\u7b49\u64cd\u4f5c\uff0c\u8fd9\u4e9b\u64cd\u4f5c\u5e76\u4e0d\u662f\u901a\u8fc7\u00a0Canvas\u00a0\u5bf9\u8c61\u672c\u8eab\u6765\u8fdb\u884c\u7684\uff0c\u800c\u662f\u901a\u8fc7\u00a0Canvas\u00a0\u5bf9\u8c61\u7684\u4e00\u4e2a\u65b9\u6cd5\u00a0getContext\u00a0\u83b7\u53d6\u00a0Canvas\u00a0\u64cd\u4f5c\u4e0a\u4e0b\u6587\u6765\u8fdb\u884c\u3002\u4e5f\u5c31\u662f\u8bf4\uff0c\u5728\u540e\u9762\u6211\u4eec\u4f7f\u7528\u00a0Canvas\u00a0\u5bf9\u8c61\u7684\u8fc7\u7a0b\u4e2d\uff0c\u90fd\u662f\u4e0e\u00a0Canvas\u00a0\u5bf9\u8c61\u7684\u00a0Context\u00a0\u6253\u4ea4\u9053\uff0c\u800c\u00a0Canvas\u00a0\u5bf9\u8c61\u672c\u8eab\u53ef\u4ee5\u7528\u6765\u83b7\u53d6\u00a0Canvas\u00a0\u5bf9\u8c61\u7684\u5927\u5c0f\u7b49\u4fe1\u606f\u3002<\/p>\n<p>\u8981\u83b7\u53d6\u00a0Canvas\u00a0\u5bf9\u8c61\u7684\u00a0Context\u00a0\u5f88\u7b80\u5355\uff0c\u76f4\u63a5\u8c03\u7528\u00a0canvas\u00a0\u5143\u7d20\u7684\u00a0getContext\u00a0\u65b9\u6cd5\u5373\u53ef\uff0c\u5728\u8c03\u7528\u7684\u65f6\u5019\u9700\u8981\u4f20\u9012\u4e00\u4e2a\u00a0Context\u00a0\u7c7b\u578b\u53c2\u6570\uff0c\u76ee\u524d\u53ef\u4ee5\u7528\u7684\u5e76\u4e14\u662f\u552f\u4e00\u53ef\u4ee5\u7528\u7684\u7c7b\u578b\u503c\u5c31\u662f\u00a02d\uff1a<\/p>\n<pre lang=\"html4strict\"><script type=\"text\/javascript\"><!--mce:0--><\/script><\/pre>\n<p><strong>Firefox\u00a03.0.x\u00a0\u7684\u5c34\u5c2c<\/strong><\/p>\n<p>Firefox\u00a03.0.x\u00a0\u867d\u7136\u652f\u6301\u4e86\u00a0canvas\u00a0\u5143\u7d20\uff0c\u4f46\u662f\u5e76\u6ca1\u6709\u5b8c\u5168\u6309\u7167\u89c4\u8303\u6765\u5b9e\u73b0\uff0c\u89c4\u8303\u4e2d\u7684\u00a0fillText\u3001measureText\u00a0\u4e24\u4e2a\u65b9\u6cd5\u5728\u00a0Firefox\u00a03.0.x\u00a0\u4e2d\u88ab\u51e0\u4e2a\u00a0Firefox\u00a0\u7279\u6709\u7684\u65b9\u6cd5\u4ee3\u66ff\uff0c\u56e0\u6b64\u5728\u00a0Firefox\u00a03.0.x\u00a0\u4e2d\u4f7f\u7528\u00a0Canvas\u00a0\u65f6\u9700\u8981\u5148\u00a0fix\u00a0\u8fd9\u4e2a\u51e0\u4e2a\u65b9\u6cd5\u5728\u4e0d\u540c\u6d4f\u89c8\u5668\u4e2d\u7684\u5dee\u522b\u3002<\/p>\n<p><!--more--><\/p>\n<p>\u4e0b\u9762\u8fd9\u4ee3\u7801\u53d6\u81ea\u00a0<a rel=\"external\" href=\"http:\/\/labs.mozilla.com\/projects\/bespin\/\">Mozilla\u00a0Bespin<\/a> \u9879\u76ee\uff0c\u5b83\u4fee\u6b63\u4e86\u00a0Firefox\u00a03.0.x\u00a0\u4e2d\u00a0Canvas\u00a0\u7684\u00a0Context\u00a0\u5bf9\u8c61\u4e0e\u00a0HTML5\u00a0\u89c4\u8303\u4e0d\u4e00\u81f4\u7684\u5730\u65b9\uff1a<\/p>\n<pre lang=\"javascript\">function\u00a0fixContext(ctx)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\/\/\u00a0*\u00a0upgrade\u00a0Firefox\u00a03.0.x\u00a0text\u00a0rendering\u00a0to\u00a0HTML\u00a05\u00a0standard\r\n\u00a0\u00a0\u00a0\u00a0if\u00a0(!ctx.fillText\u00a0&amp;&amp;\u00a0ctx.mozDrawText)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.fillText\u00a0=\u00a0function(textToDraw,\u00a0x,\u00a0y,\u00a0maxWidth)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.translate(x,\u00a0y);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.mozTextStyle\u00a0=\u00a0ctx.font;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.mozDrawText(textToDraw);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.translate(-x,\u00a0-y);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\/\/\u00a0*\u00a0Setup\u00a0measureText\r\n\u00a0\u00a0\u00a0\u00a0if\u00a0(!ctx.measureText\u00a0&amp;&amp;\u00a0ctx.mozMeasureText)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.measureText\u00a0=\u00a0function(text)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if\u00a0(ctx.font)\u00a0ctx.mozTextStyle\u00a0=\u00a0ctx.font;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var\u00a0width\u00a0=\u00a0ctx.mozMeasureText(text);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return\u00a0{\u00a0width:\u00a0width\u00a0};\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\/\/\u00a0*\u00a0Setup\u00a0html5MeasureText\r\n\u00a0\u00a0\u00a0\u00a0if\u00a0(ctx.measureText\u00a0&amp;&amp;\u00a0!ctx.html5MeasureText)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.html5MeasureText\u00a0=\u00a0ctx.measureText;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.measureText\u00a0=\u00a0function(text)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var\u00a0textMetrics\u00a0=\u00a0ctx.html5MeasureText(text);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/\u00a0fake\u00a0it\u00a0'til\u00a0you\u00a0make\u00a0it\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0textMetrics.ascent\u00a0=\u00a0ctx.html5MeasureText(\"m\").width;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return\u00a0textMetrics;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\/\/\u00a0*\u00a0for\u00a0other\u00a0browsers,\u00a0no-op\u00a0away\r\n\u00a0\u00a0\u00a0\u00a0if\u00a0(!ctx.fillText)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.fillText\u00a0=\u00a0function()\u00a0{};\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0if\u00a0(!ctx.measureText)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.measureText\u00a0=\u00a0function()\u00a0{\u00a0return\u00a010;\u00a0};\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0return\u00a0ctx;\r\n}<\/pre>\n<p><em>\u6ce8\u610f\uff1a\u5230 Opera 9.5 \u4e3a\u6b62\uff0cOpera \u8fd8\u4e0d\u652f\u6301 HTML5 \u89c4\u8303\u4e2d Canvas \u5bf9\u8c61\u7684 fillText \u4ee5\u53ca\u5176\u76f8\u5173\u65b9\u6cd5\u548c\u5c5e\u6027\u3002<\/em><\/p>\n<p><strong>Hello, Canvas!<\/strong><\/p>\n<p>\u5728\u5bf9 Canvas \u8fdb\u884c\u4e86\u4e00\u4e9b\u521d\u6b65\u4e86\u89e3\u540e\uff0c\u5f00\u59cb\u6765\u5199\u6211\u4eec\u7684\u7b2c\u4e00\u4e2a Canvas \u7a0b\u5e8f\uff0c\u95fb\u540d\u7684 HelloWorld \u7684\u53c8\u4e00\u4e2a\u5206\u652f\u201cHello, Canvas\u201d\uff1a<\/p>\n<pre lang=\"html4strict\"><canvas \u00a0id=\"screen\"\u00a0width=\"400\"\u00a0height=\"400\"><\/canvas>\r\n<script \u00a0type=\"text\/javascript\">\r\n(function()\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0var\u00a0canvas\u00a0=\u00a0document.getElementById(\"screen\");\r\n\u00a0\u00a0\u00a0\u00a0var\u00a0ctx\u00a0=\u00a0fixContext(canvas.getContext(\"2d\"));\r\n\u00a0\u00a0\u00a0\u00a0ctx.font\u00a0=\u00a0\"20pt\u00a0Arial\";\r\n\u00a0\u00a0\u00a0\u00a0ctx.fillText(\"Hello,\u00a0Canvas!\",\u00a020,\u00a020);\r\n\u00a0\u00a0\u00a0\u00a0ctx.fillText(\"www.xujiwei.com\",\u00a020,\u00a050);\r\n\u00a0\u00a0\u00a0\u00a0function\u00a0fixContext(ctx)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/\u00a0*\u00a0upgrade\u00a0Firefox\u00a03.0.x\u00a0text\u00a0rendering\u00a0to\u00a0HTML\u00a05\u00a0standard\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if\u00a0(!ctx.fillText\u00a0&&\u00a0ctx.mozDrawText)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.fillText\u00a0=\u00a0function(textToDraw,\u00a0x,\u00a0y,\u00a0maxWidth)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.translate(x,\u00a0y);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.mozTextStyle\u00a0=\u00a0ctx.font;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.mozDrawText(textToDraw);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.translate(-x,\u00a0-y);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/\u00a0*\u00a0Setup\u00a0measureText\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if\u00a0(!ctx.measureText\u00a0&&\u00a0ctx.mozMeasureText)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.measureText\u00a0=\u00a0function(text)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if\u00a0(ctx.font)\u00a0ctx.mozTextStyle\u00a0=\u00a0ctx.font;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var\u00a0width\u00a0=\u00a0ctx.mozMeasureText(text);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return\u00a0{\u00a0width:\u00a0width\u00a0};\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/\u00a0*\u00a0Setup\u00a0html5MeasureText\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if\u00a0(ctx.measureText\u00a0&&\u00a0!ctx.html5MeasureText)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.html5MeasureText\u00a0=\u00a0ctx.measureText;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.measureText\u00a0=\u00a0function(text)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var\u00a0textMetrics\u00a0=\u00a0ctx.html5MeasureText(text);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/\u00a0fake\u00a0it\u00a0'til\u00a0you\u00a0make\u00a0it\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0textMetrics.ascent\u00a0=\u00a0ctx.html5MeasureText(\"m\").width;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return\u00a0textMetrics;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/\u00a0*\u00a0for\u00a0other\u00a0browsers,\u00a0no-op\u00a0away\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if\u00a0(!ctx.fillText)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.fillText\u00a0=\u00a0function()\u00a0{};\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if\u00a0(!ctx.measureText)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.measureText\u00a0=\u00a0function()\u00a0{\u00a0return\u00a010;\u00a0};\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return\u00a0ctx;\r\n\u00a0\u00a0\u00a0\u00a0}\r\n})();\r\n<\/script><\/pre>\n<p>\u8fd0\u884c\u793a\u4f8b\uff0cCanvas \u5bf9\u8c61\u6240\u5728\u533a\u57df\u663e\u793a\u51fa\u201cHello, World!\u201d\uff0c\u8fd9\u6b63\u662f\u4ee3\u7801\u4e2d ctx.fillText(\"Hello, World!\", 20, 20); \u7684\u4f5c\u7528\u3002<\/p>\n<p><strong>fillText \u4ee5\u53ca\u76f8\u5173\u5c5e\u6027<\/strong><\/p>\n<p>fillText \u65b9\u6cd5\u7528\u6765\u5728 Canvas \u4e2d\u663e\u793a\u6587\u5b57\uff0c\u5b83\u53ef\u4ee5\u63a5\u53d7\u56db\u4e2a\u53c2\u6570\uff0c\u5176\u4e2d\u6700\u540e\u4e00\u4e2a\u662f\u53ef\u9009\u7684\uff1a<\/p>\n<p>void fillText(in DOMString text, in float x, in float y, [Optional] in float maxWidth);<\/p>\n<p>\u5176\u4e2d maxWidth \u8868\u793a\u663e\u793a\u6587\u5b57\u65f6\u6700\u5927\u7684\u5bbd\u5ea6\uff0c\u53ef\u4ee5\u9632\u6b62\u6587\u5b57\u6ea2\u51fa\uff0c\u4e0d\u8fc7\u6211\u5728\u6d4b\u8bd5\u4e2d\u53d1\u73b0\u5728 Firefox \u4e0e Chomre \u4e2d\u6307\u5b9a\u4e86 maxWidth \u65f6\u4e5f\u6ca1\u6709\u4efb\u4f55\u6548\u679c\u3002<\/p>\n<p>\u5728\u4f7f\u7528 fillText \u65b9\u6cd5\u4e4b\u524d\uff0c\u53ef\u4ee5\u901a\u8fc7\u8bbe\u7f6e Context \u7684 font \u5c5e\u6027\u6765\u8c03\u6574\u663e\u793a\u6587\u5b57\u7684\u5b57\u4f53\uff0c\u5728\u4e0a\u9762\u7684\u793a\u4f8b\u4e2d\u6211\u4f7f\u7528\u4e86\u201c20pt Arial\u201d\u6765\u4f5c\u4e3a\u663e\u793a\u6587\u5b57\u7684\u5b57\u4f53\uff0c\u4f60\u53ef\u4ee5\u81ea\u5df1\u8bbe\u7f6e\u4e0d\u540c\u7684\u503c\u6765\u770b\u5177\u4f53\u7684\u6548\u679c\u3002<\/p>\n<p><strong>\u7ed3\u675f<\/strong><\/p>\n<p>\u6682\u65f6\u5c31\u5230\u8fd9\u91cc\u4e86\uff0c\u6211\u4f1a\u4e00\u8fb9\u770b\u89c4\u8303\u4e00\u8fb9\u5199\u8fd9\u4e2a\u7cfb\u5217\uff1a\uff09<\/p>\n<p><strong>\u53c2\u8003\u8d44\u6599<\/strong><\/p>\n<ol>\n<li><a rel=\"external\" href=\"http:\/\/hred.javaeye.com\/blog\/146568\">HTML5\u7684Canvas\uff0c\u811a\u672c\u8bed\u8a00\u7684\u65b0\u821e\u53f0,\u00a0hred<\/a><\/li>\n<li><a rel=\"external\" href=\"http:\/\/www.whatwg.org\/specs\/web-apps\/current-work\/multipage\/the-canvas-element.html#the-canvas-element\">The\u00a0Canvas\u00a0Element,\u00a0WHATWG<\/a><\/li>\n<li><a rel=\"external\" href=\"https:\/\/developer.mozilla.org\/cn\/Canvas_tutorial\">Canvas\u00a0Tutorial\u00a0\u4e2d\u6587,\u00a0Mozilla<\/a><\/li>\n<li><a rel=\"external\" href=\"https:\/\/developer.mozilla.org\/en\/Canvas_tutorial\">Canvas\u00a0Tutorial\u00a0\u82f1\u6587,\u00a0Mozilla<\/a><\/li>\n<li><a rel=\"external\" href=\"http:\/\/www.opera.com\/docs\/specs\/opera95\/canvas\/\">Canvas\u00a0support\u00a0in\u00a0Opera,\u00a0Opera<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>\u4ec0\u4e48\u662fCanvas &lt;canvas&gt;\u00a0\u662f\u4e00\u4e2a\u65b0\u7684\u00a0HTML\u00a0\u5143\u7d20\uff0c\u8fd9 &hellip;<\/p>\n<p class=\"read-more\"><a href=\"https:\/\/xujiwei.com\/blog\/2009\/04\/canvas-starts-part1\/\">\u7ee7\u7eed\u9605\u8bfb &raquo;<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[44,46,45],"_links":{"self":[{"href":"https:\/\/xujiwei.com\/blog\/wp-json\/wp\/v2\/posts\/41"}],"collection":[{"href":"https:\/\/xujiwei.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xujiwei.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xujiwei.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/xujiwei.com\/blog\/wp-json\/wp\/v2\/comments?post=41"}],"version-history":[{"count":0,"href":"https:\/\/xujiwei.com\/blog\/wp-json\/wp\/v2\/posts\/41\/revisions"}],"wp:attachment":[{"href":"https:\/\/xujiwei.com\/blog\/wp-json\/wp\/v2\/media?parent=41"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xujiwei.com\/blog\/wp-json\/wp\/v2\/categories?post=41"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xujiwei.com\/blog\/wp-json\/wp\/v2\/tags?post=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}