{"id":15,"date":"2009-03-20T22:21:01","date_gmt":"2009-03-20T14:21:01","guid":{"rendered":"http:\/\/leegorous.net\/?p=15"},"modified":"2012-03-04T00:49:12","modified_gmt":"2012-03-03T16:49:12","slug":"intro-to-canvas","status":"publish","type":"post","link":"http:\/\/leegorous.net\/blog\/2009\/03\/20\/intro-to-canvas\/","title":{"rendered":"\u8fdb\u9a7bCanvas"},"content":{"rendered":"
\"intro<\/a>
\u8fdb\u9a7bcanvas<\/figcaption><\/figure>\n

<canvas>\u8fd9\u4e2a\u65b0\u7684HTML\u5143\u7d20\u7684\u5438\u5f15\u529b\u771f\u662f\u8ba9\u6211\u65e0\u6cd5\u62b5\u6321\u3002\u5728\u770b\u8fc7\u4e00\u4e9b\u4ee4\u4eba\u60ca\u5f02\u7684\u6548\u679c\u4e4b\u540e\uff0ccanvas\u968f\u5373\u6210\u4e3a\u4e86\u6700\u8fd1\u7684\u7814\u7a76\u8bfe\u9898\u4e4b\u4e00\u3002
\n\u9996\u5148\u9700\u8981\u4e00\u4e2a\u6d4f\u89c8\u5668\uff0cFirefox (1.5 \u4ee5\u4e0a)\u8fd9\u7c7b\u57fa\u4e8eGecko\u7684\u6d4f\u89c8\u5668\u3001Safari\u3001Chrome\u548cOpera\u90fd\u652f\u6301\u5b83\uff0c IE\u4e0d\u652f\u6301\u3002
\n\u5728\u65b0\u5efa\u7684\u9875\u9762\u91cc\u9762\u52a0\u5165<\/p>\n

\r\n<canvas id="myCanvas" width="300" height="150"><\/canvas>\r\n<\/pre>\n
myCanvas \u5176\u5b9e\u53ea\u662f\u4e00\u4e2a\u5bb9\u5668\uff0c\u5185\u5bb9\u7684\u586b\u5145\u5c31\u662f\u811a\u672c(\u901a\u5e38\u662fjavascript)\u51fa\u573a\u7684\u65f6\u5019\u4e86\u3002<\/p>\n
\r\nvar canvas = document.getElementById('myCanvas');\r\nif (canvas.getContext){\r\n\tvar ctx = canvas.getContext('2d');\r\n\t\/\/ drawing code here\r\n} else {\r\n\t\/\/ canvas-unsupported code here\r\n}<\/pre>\n
\u6211\u89c9\u5f97\u65e2\u7136\u8981\u6d4b\u8bd5canvas\uff0c\u5f53\u7136\u4e0d\u4f1a\u9009\u4e00\u4e2a\u4e0d\u652f\u6301\u5b83\u7684\u6d4f\u89c8\u5668\u6765\u73a9\uff0c\u4f46\u662f\u68c0\u67e5\u7279\u6027\u662f\u5426\u88ab\u652f\u6301\u662f\u4e00\u4e2a\u826f\u597d\u7684\u4e60\u60ef\uff0c\u6b63\u5f0f\u4f7f\u7528\u65f6\u5927\u53ef\u4ee5\u901a\u8fc7\u4ee3\u7801\u91cd\u6784\u5c06\u8fd9\u4e00\u4e9b\u6846\u6846\u9690\u85cf\u8d77\u6765\u3002<\/p>\n
\u7136\u540e\u753b\u4e00\u4e2a\u5f88\u5e38\u89c1\u7684\u56fe\u5427\uff0c\u4fdd\u5b58\u4ee3\u7801\u4e3ahtml\u518d\u7528\u6d4f\u89c8\u5668\u6253\u5f00\uff0c\u770b\u5230\u4ec0\u4e48\u4e86\uff1f<\/p>\n
\r\n<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">\r\n<head>\r\n<script language="javascript" type="text\/javascript">\r\nfunction drawRGB() {\r\n\tvar canvas = document.getElementById('myCanvas');;\r\n\r\n\tif (canvas.getContext) {\r\n\t\tvar ctx = canvas.getContext('2d');\r\n\r\n\t\tvar x = y = 60;\r\n\t\tvar r = 20; \/\/ \u534a\u8fb9\u957f\r\n\t\tvar dy = Math.sqrt((r*2)*(r*2)-r*r); \/\/ \u663e\u800c\u6613\u89c1\r\n\t\tvar radius = 30;\r\n\t\tvar startAngle = 0;\r\n\t\tvar endAngle = Math.PI*2;\r\n\t\tvar anticlockwise = true;\r\n\t\tvar list = [\r\n\t\t\t\/\/ \u7ea2\r\n\t\t\t{'x': x, 'y': y, 'color': "rgb(255,0,0)"},\r\n\t\t\t\/\/ \u7eff \u900f\u660e0.6\r\n\t\t\t{'x': x-r, 'y': y+dy, 'color': "rgba(0,255,0,0.6)"},\r\n\t\t\t\/\/ \u84dd \u900f\u660e0.6\r\n\t\t\t{'x': x+r, 'y': y+dy, 'color': "rgba(0,0,255,0.6)"}\r\n\t\t]; \/\/ \u4e09\u4e2a\u5706\u7684\u5706\u5fc3\u4f4d\u7f6e\u53ca\u5176\u989c\u8272\r\n\r\n\t\tfor (var i=0; i<list.length; i++) {\r\n\t\t\tvar item = list[i];\r\n\t\t\tctx.beginPath(); \/\/ \u5f00\u542f\u65b0\u8def\u5f84\r\n\t\t\tctx.fillStyle = item.color; \/\/ \u8bbe\u7f6e\u586b\u5145\u6837\u5f0f\r\n\r\n\t\t\t\/\/ \u753b\u5706\u5f62\u8def\u5f84\r\n\t\t\tctx.arc(item.x, item.y, radius,\r\n\t\t\t\tstartAngle, endAngle, anticlockwise);\r\n\r\n\t\t\t\/\/ \u586b\u5145\r\n\t\t\tctx.fill();\r\n\t\t}\r\n\t}\r\n}\r\n<\/script>\r\n<\/head>\r\n<body onload="drawRGB();">\r\n<canvas id="myCanvas" width="300" height="150"><\/canvas>\r\n<\/body>\r\n<\/html><\/pre>\n
\u89e3\u91ca\u89c1\u6ce8\u91ca<\/p>\n
\u672a\u5b8c\u5f85\u7eed\u2026<\/p>\n","protected":false},"excerpt":{"rendered":"
<canvas>\u8fd9\u4e2a\u65b0\u7684HTML\u5143\u7d20\u7684\u5438\u5f15\u529b\u771f\u662f\u8ba9\u6211\u65e0\u6cd5\u62b5\u6321\u3002\u5728\u770b\u8fc7\u4e00\u4e9b\u4ee4\u4eba\u60ca\u5f02\u7684\u6548\u679c\u4e4b\u540e\uff0ccan … <\/p>\n
\u7ee7\u7eed\u9605\u8bfb\u201c\u8fdb\u9a7bCanvas\u201d<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[5,4],"_links":{"self":[{"href":"http:\/\/leegorous.net\/blog\/wp-json\/wp\/v2\/posts\/15"}],"collection":[{"href":"http:\/\/leegorous.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/leegorous.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/leegorous.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/leegorous.net\/blog\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":15,"href":"http:\/\/leegorous.net\/blog\/wp-json\/wp\/v2\/posts\/15\/revisions"}],"predecessor-version":[{"id":1080,"href":"http:\/\/leegorous.net\/blog\/wp-json\/wp\/v2\/posts\/15\/revisions\/1080"}],"wp:attachment":[{"href":"http:\/\/leegorous.net\/blog\/wp-json\/wp\/v2\/media?parent=15"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/leegorous.net\/blog\/wp-json\/wp\/v2\/categories?post=15"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/leegorous.net\/blog\/wp-json\/wp\/v2\/tags?post=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}