{"id":91,"date":"2009-06-07T13:51:23","date_gmt":"2009-06-07T05:51:23","guid":{"rendered":"http:\/\/tmp.xujiwei.com\/blog\/?p=91"},"modified":"2010-01-28T23:34:10","modified_gmt":"2010-01-28T15:34:10","slug":"canvas-starts-part3","status":"publish","type":"post","link":"https:\/\/xujiwei.com\/blog\/2009\/06\/canvas-starts-part3\/","title":{"rendered":"HTML5 Canvas \u8d77\u6b65(3) – \u989c\u8272\u4e0e\u6e10\u53d8"},"content":{"rendered":"

\u4e0a\u4e00\u7bc7<\/a>\u4ecb\u7ecd\u4e86 HTML5 \u4e2d Canvas \u7684\u8def\u5f84\uff0c\u8fd9\u7bc7\u5c06\u8981\u4ecb\u7ecd\u4e00\u4e0b Canvas \u4e2d\u7684\u989c\u8272\u53ca\u6e10\u53d8\u3002<\/p>\n

Canvas \u4e2d\u7684\u57fa\u672c\u989c\u8272\u7cfb\u7edf<\/strong><\/p>\n

\u5728 Canvas \u4e2d\uff0c\u989c\u8272\u4e3b\u8981\u7528\u9014\u5c31\u662f\u5728\u7ed8\u5236\u8def\u5f84\u65f6\uff0c\u7528\u6765\u6307\u5b9a\u586b\u5145\u989c\u8272\u548c\u8fb9\u6846\u989c\u8272\u3002<\/p>\n

Canvas \u4e2d\u7684\u989c\u8272\u53c2\u6570\u503c\u6709\u4e24\u79cd\u683c\u5f0f\uff1a<\/p>\n

1. \u5982\u679c\u900f\u660e\u5ea6\u4e3a 1.0\uff0c\u4e5f\u5c31\u662f\u4e0d\u900f\u660e\uff0c\u989c\u8272\u503c\u7684\u683c\u5f0f\u5c31\u4e0e\u4e00\u822c\u4f7f\u7528\u4e00\u6837\uff0c\u4e3a\uff1a#AABBCC\uff0c\u5176\u4e2d AA\u3001BB\u3001CC \u5206\u522b\u4e3a Red\u3001Green\u3001Blue \u5206\u91cf\u3002<\/p>\n

2. \u5982\u679c\u900f\u660e\u5ea6\u4e0d\u4e3a 1.0\uff0c\u4e5f\u5c31\u662f\u5e26\u900f\u660e\uff0c\u989c\u8272\u503c\u683c\u5f0f\u53ef\u4ee5\u4f7f\u7528 rgba(r, g, b, a)\uff0c\u5176\u4e2d r\u3001g\u3001b\u3001a \u5206\u522b\u4e3a Red\u3001Green\u3001Blue \u5206\u91cf\u548c\u900f\u660e\u5ea6\u3002\u900f\u660e\u5ea6\u7684\u503c\u4e3a 0 \u81f3 1.0 \u4e4b\u95f4\u7684\u4e00\u4e2a\u6570\u503c\u3002<\/p>\n

3. \u989c\u8272\u503c\u8fd8\u53ef\u4ee5\u4e3a\u5df2\u77e5\u7684\u989c\u8272\u540d\u79f0\uff0c\u4f8b\u5982 red\u3001blue\u3001green \u7b49\u3002<\/p>\n

\u603b\u7684\u8bf4\u6765\uff0cCanvas \u4e2d\u989c\u8272\u503c\u7684\u683c\u5f0f\u4e0e CSS \u4e2d\u4e00\u81f4\uff0c\u56e0\u6b64\u989c\u8272\u503c\u6ca1\u6709\u7279\u522b\u9700\u8981\u6ce8\u610f\u7684\u5730\u65b9\u3002<\/p>\n

\"\u56fe\u7247\u9644\u4ef6\"<\/a><\/p>\n

\r\n
<canvas\u00a0id=\"canvas\"\u00a0width=\"600\"\u00a0height=\"500\"><\/canvas>\r\n<script\u00a0type=\"text\/javascript\">\r\n\u00a0\u00a0\u00a0\u00a0var\u00a0canvas\u00a0=\u00a0document.getElementById(\"canvas\");\r\n\u00a0\u00a0\u00a0\u00a0var\u00a0ctx\u00a0=\u00a0canvas.getContext(\"2d\");\r\n\u00a0\u00a0\u00a0\u00a0\/\/\u00a0fill\u00a0a\u00a0rectangle\u00a0whit\u00a0sepecified\u00a0fill\u00a0style\r\n\u00a0\u00a0\u00a0\u00a0function\u00a0fillRect(color)\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.fillStyle\u00a0=\u00a0color;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.fillRect(0,\u00a00,\u00a0150,\u00a0100);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.font\u00a0=\u00a0\"10pt\u00a0Arial\";\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.fillStyle\u00a0=\u00a0\"white\";\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.fillText(color,\u00a06,\u00a020);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ctx.translate(160,\u00a00);\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0ctx.translate(0,\u00a050);\r\n\u00a0\u00a0\u00a0\u00a0\/\/\u00a0fill\u00a0rect\u00a0with\u00a0color\u00a0name\r\n\u00a0\u00a0\u00a0\u00a0fillRect(\"green\");\r\n\u00a0\u00a0\u00a0\u00a0\/\/\u00a0fill\u00a0rect\u00a0with\u00a00xAABBCC\r\n\u00a0\u00a0\u00a0\u00a0fillRect(\"#AABBCC\");\r\n\u00a0\u00a0\u00a0\u00a0\/\/\u00a0fill\u00a0rect\u00a0with\u00a0rgba(50,\u00a0100,\u00a0150,\u00a00.5)\r\n\u00a0\u00a0\u00a0\u00a0ctx.translate(0,\u00a0-25);\r\n\u00a0\u00a0\u00a0\u00a0fillRect(\"rgba(50,100,150,0.5)\");\r\n\r\n\u00a0\u00a0\u00a0\u00a0\/\/\u00a0fill\u00a0another\u00a0rect\u00a0with\u00a0rgba(150,\u00a0100,\u00a050,\u00a00.5)\r\n\u00a0\u00a0\u00a0\u00a0ctx.translate(-110,\u00a050);\r\n\u00a0\u00a0\u00a0\u00a0fillRect(\"rgba(150,\u00a0100,\u00a050,\u00a00.5)\");\r\n<\/script><\/div><\/pre>\n
 <\/span><\/p>\n
\u6ce8\u610f\uff0c\u4ee5\u4e0a\u4ee3\u7801\u9700\u8981\u4f7f\u7528\u00a0Firefox\u00a03.5\u00a0\u6765\u67e5\u770b\uff0c\u5728\u00a0Firefox\u00a03.0.x\u00a0\u4e2d\uff0cCanvas\u00a0\u7684\u00a0Context\u00a0\u5bf9\u8c61\u4e0d\u652f\u6301\u00a0fillText\u00a0\u65b9\u6cd5\uff0c\u800c\u6211\u5b89\u88c5\u7684\u00a0Chrome\u00a02.0.174.0\u00a0\u5bf9\u00a0translate\u00a0\u65b9\u6cd5\u7684\u5b9e\u73b0\u6709\u8bef\u3002<\/p>\n
2.\u00a0Canvas\u00a0\u4e2d\u7684\u6e10\u53d8<\/strong><\/p>\n
WHATWG\u00a0\u7684\u00a0Canvas\u00a0\u89c4\u8303\u4e2d\u89c4\u5212\u4e86\u4e24\u79cd\u6e10\u53d8\u6a21\u5f0f\uff0c\u4e00\u79cd\u662f\u7ebf\u6027\u6e10\u53d8<\/strong>\uff0c\u53e6\u4e00\u79cd\u662f\u5f84\u5411\u6e10\u53d8<\/strong>\u3002\u5982\u679c\u9700\u8981\u5728\u00a0Canvas\u00a0\u4e2d\u4f7f\u7528\u6e10\u53d8\uff0c\u9996\u5148\u8981\u6839\u636e\u4f60\u6240\u8981\u521b\u5efa\u7684\u6e10\u53d8\u6a21\u5f0f\u6765\u8c03\u7528\u00a0Context\u00a0\u7684\u76f8\u5e94\u65b9\u6cd5\u6765\u521b\u5efa\u4e00\u4e2a\u6e10\u53d8\u5bf9\u8c61\uff0c\u8fd9\u4e2a\u5bf9\u8c61\u5c31\u662f\u7528\u6765\u63a7\u5236\u6e10\u53d8\u7684\u6548\u679c\u3002<\/p>\n
<\/p>\n
2.1\u00a0\u7ebf\u6027\u6e10\u53d8<\/strong><\/p>\n
\u7ebf\u6027\u6e10\u53d8\u4f7f\u7528\u00a0Canvas\u00a0Context\u00a0\u7684\u00a0createLinearGradient\u00a0\u65b9\u6cd5\u521b\u5efa\uff0c\u5b83\u7684\u5b9a\u4e49\u5982\u4e0b\uff1a<\/p>\n
CanvasGradient\u00a0createLinearGradient(in\u00a0float\u00a0x0,\u00a0in\u00a0float\u00a0y0,\u00a0in\u00a0float\u00a0x1,\u00a0in\u00a0float\u00a0y1);<\/em><\/p>\n
\u901a\u8fc7\u00a0(x0,\u00a0y0)\u00a0\u4e0e\u00a0(x1,\u00a0y1)\u00a0\u6307\u5b9a\u6e10\u53d8\u7684\u5f00\u59cb\u4f4d\u7f6e\u4e0e\u622a\u6b62\u4f4d\u7f6e\u3002\u5f53\u7136\uff0c\u521b\u5efa\u5b8c\u7ebf\u6027\u6e10\u53d8\u5bf9\u8c61\u5e76\u4e0d\u80fd\u5b8c\u5168\u5f00\u59cb\u4f7f\u7528\u6e10\u53d8\u5bf9\u8c61\uff0c\u4f60\u9700\u8981\u7ed9\u5b83\u6307\u5b9a\u6e10\u53d8\u7684\u8d77\u59cb\u8272\u4ee5\u53ca\u7ec8\u6b62\u8272\u3002CanvasGradient\u00a0\u5bf9\u8c61\u6709\u4e00\u4e2a\u00a0addColorStop\u00a0\u65b9\u6cd5\u7528\u6765\u6dfb\u52a0\u989c\u8272\u3002<\/p>\n
gradient.addColorStop(offset,\u00a0color)<\/em><\/p>\n
\u5728\u7ebf\u6027\u6e10\u53d8\u4e2d\uff0c\u504f\u79fb\u91cf\u00a0offset\u00a0\u53ea\u80fd\u53d6\u00a00\u00a0\u6216\u00a01\uff0c\u5206\u522b\u4ee3\u8868\u7ebf\u6027\u6e10\u53d8\u7684\u8d77\u59cb\u8272\u548c\u7ec8\u6b62\u8272\u3002color\u00a0\u53c2\u6570\u7684\u503c\u53ef\u4ee5\u53c2\u8003\u4e0a\u9762\u8bf4\u660e\u7684\u989c\u8272\u683c\u5f0f\u3002<\/p>\n
\u4f8b\u5982\uff0c\u6211\u8981\u521b\u5efa\u4e00\u4e2a\u4ece\u00a0(20,\u00a020)\u00a0\u5230\u00a0(150,\u00a0150)\u00a0\u7684\u4e00\u4e2a\u6e10\u53d8\uff0c\u4ece\u7eff\u8272\u6e10\u53d8\u5230\u767d\u8272\u900f\u660e\uff0c\u5c31\u53ef\u4ee5\u6309\u7167\u4e0b\u9762\u7684\u4ee3\u7801\u6765\u521b\u5efa\u00a0CanvasGradient\u00a0\u5bf9\u8c61\uff1a<\/p>\n
 <\/span><\/p>\n